If you're looking to customize the style of MUI components, there are various approaches you can take. One option is to directly override the default CSS class of a component by referencing it in your imported CSS file. For example, if you want to modify the Button component's appearance, you can add your desired CSS properties to the .MuiButton-root class in your CSS file:
.MuiButton-root{
color: white;
height: 20px;
padding: 10px;
}
Alternatively, you can utilize the available props of a component, which are detailed in the individual documentation pages on the MUI site. Another method is to leverage makeStyles or styled to apply styles to your components.
Here's an example demonstrating the use of makeStyles with the Button component:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Button, TextField } from '@material-ui/core';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
function RenderComponent(){
const classes = useStyles();
return(
<>
<Button className={classes.root} variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
To explore more about styling options, check out this resource here.