All you need to know to use Material-UI like a PRO
Install
First install @material-ui core. This is the main library to use the main library
npm install @material-ui/core
yarn add @material-ui/core
Using with default styles
- All components in @MUI comes with default styles (with a default theme).
import react from 'react'
import { Button } from '@material-ui/core'
const MyComponent = () => {
return <Button>Material UI Button</Button>
}
export default MyComponent
Using with custom styles
- Using
className
in the MUI Button component is enough to apply your CSS rules
withStyles HOC
import react from 'react'
import { Button, withStyles } from '@material-ui/core'
// can be an object
const customStyles = {
myCustomClass: {
textTransform: 'uppercase'
}
}
// also can be a function receiving theme as parameter
// in this case you have to return an object
const customStyles = theme => ({
myCustomClass: {
textTransform: 'uppercase',
padding: theme.spacing(3),
color: theme.palette.primary.main
}
})
const MyComponent = ({ classes }) => {
return <Button className={classes.myCustomClass}>
Material UI Button
</Button>
}
export default withStyles(customStyles)(MyComponent)
makeStyles HOOK
import react from 'react'
import { Button, makeStyles } from '@material-ui/core'
// you can use also an object as parameter for makeStyles
const useMyComponentStyle = makeStyles((theme) => ({
myCustomClass: {
textTransform: 'uppercase',
padding: theme.spacing(3),
color: theme.palette.primary.main
}
}))
const MyComponent = () => {
const classes = useMyComponentStyle()
return <Button className={classes.myCustomClass}>
Material UI Button
</Button>
}
export default MyComponent
Using overriding the internal Material-UI styles
To override styles you have to use the prop classes
in the @MUI component. All Material-UI components have the classes
style.
You can find a list with all styles applied to the component in the API docs. For example, for the Button component here you can find all css rule name applied
import react from 'react'
import { Button, withStyles } from '@material-ui/core'
// also can be a function receiving theme as parameter
// in this case you have to return an object
const customStyles = theme => ({
myDisabledButton: {
color: theme.palette.secondary.main
}
})
// overriding the root class from the Button component
const MyComponent = ({ classes }) => {
return <Button classes={{ disabled: classes.myDisabledButton }}>
Material UI Button
</Button>
}
export default withStyles(customStyles)(MyComponent)
We are overriding the disabled
class
Media queries in Material-UI
Material-UI comes by default with the following breakpoints:
xs
(extra-small): 0pxsm
(small): 600pxmd
(medium): 960pxlg
(large): 1280pxxl
(extra-large): 1920px
Also, you can use the really useful helpers:
theme.breakpoints.up(key)
theme.breakpoints.down(key)
theme.breakpoints.only(key)
theme.breakpoints.between(start, end)
import react from 'react'
import { Button, withStyles } from '@material-ui/core'
const customStyles = theme => ({
myDisabledButton: {
[theme.breakpoints.down('sm')]: {
backgroundColor: theme.palette.secondary.main
},
[theme.breakpoints.up('md')]: {
backgroundColor: theme.palette.primary.main
}
}
})
const MyComponent = ({ classes }) => {
return <Button classes={{ disabled: classes.myDisabledButton }}>
Material UI Button
</Button>
}
export default withStyles(customStyles)(MyComponent)
Creating a Material-UI theme
import React from 'react'
// CssBaseline help us to normalize styles
import { CssBaseline } from '@material-ui/core'
import { ThemeProvider } from '@material-ui/core/styles'
import App from './components/App.jsx'
import theme from './path/to/your/theme'
ReactDOM.render(
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>,
document.getElementById('root'))
Now you only need to create the theme file. My recomendation is create a files structure like this:
This ensures you to have a really good structure in case you App grows a lot. Once you have created this structure let’s go to see every file:
mixins.js
/**
* Creates all flex rules
* @param {String} flexFlow
* @param {String} justifyContent
* @param {String} alignItems
*/
const flexy = (flexFlow, justifyContent, alignItems) => ({
display: 'flex',
flexFlow,
justifyContent,
alignItems,
})
/**
* Convert HEX color to rgb with opacity
* convertToRGB('#cccccc', 0.5) | output => "rgba(204,204,204,0.5)"
*
* @param {String} HEXColor - starting with '#'
* @param {Number} opacity
*/
const convertToRGB = (HEXColor, opacity = 1) => {
let c
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(HEXColor)) {
c = HEXColor.substring(1).split('')
if (c.length === 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]]
}
c = `${'0x'}${c.join('')}`
return `rgba(${[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',')}, ${opacity})`
}
throw new Error('Bad HEXColor')
}
export {
flexy,
convertToRGB
}
overrides.js
const overrides = {
MuiInputBase: {
root: {
fontSize: '1rem' // overriding all InputBase
}
}
}
export { overrides }
palette.js
const palette = {
primary: {
main: '#1E5FBB'
},
secondary: {
main: '#F3A700'
}
}
export { palette }
typography.js
const globalFontRules = {
fontFamily: "'Roboto',sans-serif",
fontStyle: 'normal',
htmlFontSize: 16,
fontWeight: 300
}
const typography = {
...globalFontRules
}
export { globalFontRules, typography }
theme.js
import { createMuiTheme } from '@material-ui/core/styles'
import { palette } from './palette'
import { typography } from './typography'
import { overrides } from './overrides'
import { flexy, convertToRGB } from './mixins'
const theme = createMuiTheme({
spacing: value => value ** 2,
palette,
typography,
overrides,
mixins: {
flexy,
convertToRGB
}
})
export default theme
export { palette }