What is @material-ui/styles?
The @material-ui/styles package is a library that allows you to manage styles in your React applications. It provides an API for defining styles that can be applied to components in a consistent and reusable manner. This package is part of the larger Material-UI framework, which is a popular set of tools for building React user interfaces according to the Material Design guidelines.
Theming
Allows you to create a custom theme and apply it globally across all components in your application using a ThemeProvider.
{
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
},
});
function App() {
return (
<ThemeProvider theme={theme}>
<YourComponent />
</ThemeProvider>
);
}
}
CSS-in-JS
Provides a way to define styles using JavaScript, which allows for dynamic styling and access to props and theme in styles.
{
import { makeStyles } from '@material-ui/core/styles';
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 StyledComponent() {
const classes = useStyles();
return <button className={classes.root}>Styled Button</button>;
}
}