What is @mui/styles?
@mui/styles is a styling solution for React applications that is part of the Material-UI library. It provides a set of utilities to help you style your components using JavaScript, allowing for dynamic and theme-based styling.
What are @mui/styles's main functionalities?
CSS-in-JS
This feature allows you to define styles using JavaScript objects. The `makeStyles` function generates a hook that you can use to apply these styles to your components.
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 MyComponent() {
const classes = useStyles();
return <button className={classes.root}>Styled Button</button>;
}
Theming
Theming allows you to define a theme object that can be used to provide consistent styling across your application. The `ThemeProvider` component makes the theme available to all components within its subtree.
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
});
function ThemedComponent() {
return (
<ThemeProvider theme={theme}>
<Button color="primary">Primary Button</Button>
<Button color="secondary">Secondary Button</Button>
</ThemeProvider>
);
}
Styled Components
Styled Components allow you to create custom-styled components using the `styled` function. This approach provides a more component-centric way of applying styles.
const MyButton = styled('button')({
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 MyComponent() {
return <MyButton>Styled Button</MyButton>;
}
Other packages similar to @mui/styles
styled-components
Styled-components is a popular library for styling React applications using tagged template literals. It allows you to write plain CSS in your JavaScript and provides a way to create component-level styles. Compared to @mui/styles, styled-components offers a more flexible and modern approach to styling with a focus on component-based design.
emotion
Emotion is a performant and flexible CSS-in-JS library. It provides both a styled API similar to styled-components and a css function for writing styles. Emotion is known for its high performance and flexibility, making it a strong alternative to @mui/styles for dynamic and theme-based styling.
aphrodite
Aphrodite is a lightweight CSS-in-JS library developed by Khan Academy. It focuses on performance and ease of use, providing a straightforward API for defining and applying styles. While it may not offer as many features as @mui/styles, it is a good choice for projects that require a simple and efficient styling solution.
@mui/styles
You can leverage our styling solution, even if you are not using our components.
Installation
Install the package in your project directory with:
npm install @mui/styles
Documentation
Visit https://mui.com/system/styles/basics/ to view the full documentation.
@material-ui/types@6.0.0
This package is just re-released since version 5.1.7 had a breaking change.
Docs
- <!-- 28 -->[Autocomplete] Fix tagSize class typo (#25908) @JanMisker
- <!-- 51 -->[DataGrid] Update docs sections (#25980) @dtassone
- <!-- 38 -->[docs] Batch small fixes (#25807) @m4theushw
- <!-- 13 -->[docs] Explicitly list demos of unstyled components (#25900) @eps1lon
- <!-- 04 -->[docs] Expose heading links in a11y tree (#25861) @eps1lon
- <!-- 58 -->[docs] Fix minor typo (#26001) @onpaws
- <!-- 09 -->[docs] Fix global styles leaking on different pages (#25855) @mnajdova
- <!-- 31 -->[docs] Fix Typography api docs for
paragraph
prop (#25929) @DanailH - <!-- 17 -->[docs] Fix Slider's classes wrong description (#25907) @mnajdova
- <!-- 37 -->[docs] Grammar correction in autocomplete API (#25910) @gruber76
- <!-- 15 -->[docs] Require documentation of demos (#25811) @eps1lon
- <!-- 36 -->[docs] Update minimum required TypeScript version (#25930) @eps1lon
- <!-- 56 -->[Table] Improve description of TablePagination.rowsPerPageOptions (#25982) @kevinlul
Core
- <!-- 54 -->[core] Fix wrong imports to '@material-ui/styles' (#25984) @mnajdova
- <!-- 52 -->[core] Ensure props spreading works as expected (#25939) @oliviertassinari
- <!-- 47 -->[core] Batch small changes (#25968) @oliviertassinari
- <!-- 35 -->[core] Enable trailing comma in TypeScript files (#25931) @eps1lon
- <!-- 33 -->[core] Remove @typescript-to-proptypes-generate handlers (#25909) @eps1lon
- <!-- 18 -->[core] Update slots components to enable flatten specificity for overrides (#25853, #25864, #25881, #25884, #25887, #25904, #25892) @mnajdova
- <!-- 27 -->[test] Add current behavior of inverleaving elements on mousedown (#25903) @eps1lon
- <!-- 20 -->[test] Add test validator to improve DX (#25854) @siriwatknp
- <!-- 57 -->[test] Fix duplicate key in TreeItem test (#26000) @mnajdova
All contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @gruber76, @JanMisker, @kevinlul, @Knoxo, @m4theushw, @mnajdova, @oliviertassinari, @simonecervini, @siriwatknp, @vicasas, @Vikram710, @wellwellmissesanderson