score:1
i found an alternative way in the docs, that's easier to use for me: instead of using select component, i use textfield with "select" props
cf: https://material-ui.com/components/text-fields/#select
<textfield
id="standard-select-currency"
select
label="select"
value={currency}
onchange={handlechange}
helpertext="please select your currency"
>
{currencies.map((option) => (
<menuitem key={option.value} value={option.value}>
{option.label}
</menuitem>
))}
</textfield>
which allows you to access textfield props such as margin="none", margin="dense"
score:4
according to the doc, there are several ways that we can override the material ui component styles.
if we want to override the padding of the select
components differently and occasionaly, or if this process would not be repeated in the entire project, we can simply use overriding styles with classes approach. in this way, first we need to create our desired padding for select component by makestyles
as below:
const usestyles = makestyles((theme) => ({
rootfirstselect: {
padding: "4px 0px"
},
rootsecondselect: {
padding: "10px 80px"
}
}));
and then assign it to the classes
prop of the component, by modifying the root element:
const classes = usestyles();
//other part of the code
return (
//other part of the code
<select
classes={{ root: classes.rootfirstselect }}
//other props
>
//other part of the code
)
working sandbox example for this method
if we want to override the padding of the select
component for the whole project, global theme variation would prevent repetition. in this way, we should create a theme by createmuitheme
, as below, and apply our desired changes there:
const theme = createmuitheme({
overrides: {
muiselect: {
select: {
padding: "4px 0px 10px 130px !important"
}
}
}
});
then pass this theme as a prop to the themeprovider
component which surround the whole project:
<themeprovider theme={theme}>
<demo />
</themeprovider>
Source: stackoverflow.com
Related Query
- Not able to change padding of material UI Select component
- Change color of Material UI Select component border not working
- React testing library on change for Material UI Select component
- enzyme not simulating change event on React Material-UI v1 - Select component
- Selected Value not showing in Textfield Select - Material UI React Component
- 'keepMounted' property on Material UI Select component not mounting menu items to DOM
- Not able to add, update, delete rows in material table react using class based component. Previously it was working with functional component
- Not able to reduce the size of image in Material UI CardMedia in a React component
- Material UI ExpandMoreOutlined icon not able to give the exact padding
- Child Component is not able to trigger state change
- Change color of the IconComponent of Material UI's Select Component
- Not able to change time format for KeyboardTimePicker in Material UI
- Material UI Select component not picking input value
- Material ui Select component is not working - "Error: choices.map is not a function"
- change in style of material ui InputLabel component not working. code below
- React Child Component Not Updating After Parent State Change
- Component does not remount when route parameters change
- React component not re-rendering on state change
- Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled
- Handle change on Autocomplete Component from material ui
- React-redux component does not rerender on store state change
- Change color of Select component's border and arrow icon Material UI
- React shouldComponentUpdate() is called even when props or state for that component did not change
- React Mobx - component not updating after store change
- Material UI component reference does not work
- How to test Material UI Select Component with React Testing Library
- How to change material UI select border and label
- Select is not working onClick IconComponent(dropdown-arrow) in react material ui
- Component not updating when I change the props that I pass to it in React
- React component not re-rendering after props change
More Query from same tag
- How to write a Jest-enzyme test case for code in React useEffect whose dependencies are updated in its child component
- How to remove data on logout when using firebase and react query?
- Can I use two useEffect and have map inside a map
- how to handle local video files Reactjs
- React UseEffect Example Not Working Reason
- Creating a table-of-contents with a floating sidebar
- React: reset the input value on space pressed
- How do I resolve a Bad Request 400 error using send_mail function?
- How can i test downloading excel file with jest?
- TypeScript: TypeError: App is not a constructor
- How to copy Redux store in component state with hooks?
- Error occurred prerendering page "/404" and Error for page /_error: pages with `getServerSideProps` can not be exported
- Tried to enable the CSS module but error is displayed
- Passing data to sibling components with react hooks?
- Submit Form Using React Redux
- Get react element string type
- Typing reducer with redux-actions library
- firebase commands not working in vs code terminal 800a03ea error
- React Big Calendar style previous days to current date
- make onclick inside map reactjs
- Prevent passing a new function as a prop in a functional component that uses useState
- Axios then, catch are not called
- How to change the handleChange action based on the select input using react?
- How to select alt+anykey or shift+anykey in react-hotkeys?
- How to add gulp to reactjs?
- Make PWA with React with serviceWorker
- using css-module with react?
- Cypress react cy.visit() any url that is not index
- Input field (using downshift) is clearing the entered data when click on div other than submit and input field
- Is it possible to check the html tag name on which it is present after getting the element using test id?