score:3
Accepted answer
In v1, you can use the theme overrides
property to customize the styles of a specific component type. Instead of providing theme options for individual components, this feature allows you to customize every style that material-ui injects into the DOM.
You can find a list of the CSS classes for each component on the website (in component API section).
The following example customizes the appearance of the Button component
const theme = createMuiTheme({
overrides: {
MuiButton: {
// override root styles for the button component.
root: {
// Name of the rule
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
color: 'white',
height: 48,
padding: '0 30px',
marginRight: 32,
},
// Custom styles for the raised button variant
raised: {
borderRadius: 50,
color: 'white',
// Custom hover styles for raised button
'&:hover': {
boxShadow: shadows[4],
},
// Custom active styles for raised button
'&:active': {
boxShadow: `${shadows[24]} !important`,
},
},
},
}
});
Source: stackoverflow.com
Related Query
- How can I customize material-ui V1 components across entire application when creating a theme?
- How can we make sure other <ListItem> components as collapsible when one <ListItem> component get expands under <List> react material ui component?
- How can I clear the localstorage when user close react application window?
- How can I use React Material UI's transition components to animate adding an item to a list?
- how can I make a scrollable component that scrolls to the latest children components automatically when I append a child component?
- How can I access child components values from a parent component when they are added dynamically?
- Material ui v4: I want to customize a Material UI button inside a class component using types script. Kindly let me know how can I do it?
- Material React Select Multiple: How i can remove from my array when i click in a selected element?
- How can I make my Material Icons change color when I hover over them?
- How can I get all sibling components to correctly re-render when dispatching a redux action from one sibling component?
- How can I change styling of all Material UI Typography components in single react component without applying a class to every element?
- How can I prevent all of my accodion components being toggled when clicked in React?
- For Material UI, how can I know what the properties of each components are?
- How can I change styled components theme, when className is generated dynamically?
- Material UI How can i get meunItem key and value when touch up
- How can I dynamically render components when enter an input
- How I can change the input color of Material UI TextField when is input is disabled [MUI v: 5.0.8]
- How can a Styled Components Theme be passed as Props to a Material UI component?
- How can I give an empty material UI text field a value of null, when submitting the form, instead of an empty string?
- How can I get a Material UI React Textfield to not be overlayed by text, when it has position sticky and it has been scrolled up?
- How can I change the border color when I hover a button with Material UI
- How to customize label color of material ui Textfield when out of focus?
- How can i get multiple recoil atoms when using components multiple?
- How can I have my content fill in the remainder of the page when I'm using Material UI AppBar?
- How can I override autocomplete selected option in material UI components
- React: Why sibling components are re-rendered when setValue of hooks is called and how can I stop this. Please the code below
- How can I add a background color to my nav when scroll up with Material UI?
- How can I customize the action icons in Material Table dynamically?
- How can I use components in multiple files when adding React to a website?
- How can I prevent event bubbling in nested React components on click?
More Query from same tag
- How to update array within state object with react/redux
- History.push doesn't work when redirecting to the same pathname but with different route param
- How do I get any form value from anywhere in my app in redux-forms v7
- Making conditional async call with same parameters in Typescript React
- Do I have to use bind(this) in this method?
- How to change class on hover in React without useState or so that not all elements are triggered
- How to cancel the image while uploading using reactjs
- React css precedence
- Reset countdown timer in on button click in react
- How get multiple values from checkbox list into state using React useState hook
- React not re-rendering a map function on redux store change ( with MaterializeCss select options)
- Pass a React constant to useEffect hook
- d3 elements not showing in react
- NextJS + Apollo: How to get multiple queries on apolloClient.query inside getServerSideProps?
- jest check if the correct component is rendered
- ReactJs : listenAndPromise is not a function
- How can i use breakpoint.value
- update and get new state from setState Hook with Jest
- Sidebar Animation using FramerMotion with Chakra UI not working when state is switched to React Context
- Unable to set state after executing componentDidMount
- Reducer not updating props in component correctly
- ESLint, how to lint curly braces within JSX?
- How to limit Google Maps Places Autocomplete API results to cities?
- Yup optional field validate number - React Hook Form
- Zero value MenuItem in a Material-UI SelectField with Redux-Form
- Initialise third party library using React hooks
- React event-handling (onClick) inconsistency
- am getting an error props.onSubmitForm is not a function while trying to pass data from child to parent component in react
- React.js not working on Plunker
- $gte & $lte is not working as expected in Mongoose/MongoDB