[React] material-ui

모듈 설치

yarn add @material-ui/styles @material-ui/core

makeStyles

import React from 'react';
import {makeStyles} from '@material-ui/styles';

const useStyles = makeStyles({
    root: {
        background: 'grey'
    },
});

const App = () => {
    const style = useStyles();

    return (
        <div>
            <div className={style.root}>Hello World</div>
        </div>
    );
};

export default App;

styled

import React from 'react';
import {styled} from '@material-ui/styles';
import Box from '@material-ui/core/Box'

const TextBox = styled(Box)({
    background: 'grey'
});

const App = () => {
    return (
        <div>
            <TextBox>Hello World</TextBox>
        </div>
    );
};

export default App;

withStyles

import React from 'react';
import {withStyles} from '@material-ui/styles';

const styles = {
    text: {
        background: 'grey'
    }
};

const App = ({classes}) => {
    return (
        <div>
            <div className={classes.text}>Hello World</div>
        </div>
    );
};

export default withStyles(styles)(App);

conditional

import React from 'react';
import {styled} from '@material-ui/styles';
import Box from '@material-ui/core/Box'

const TextBox = styled(Box)({
    color: "white",
    '&:hover': {
        color: 'red'
    },
    background: props => {
        if (props.backgroundcolor) {
            return props.backgroundcolor;
        }

        if (props.isimportant) {
            return "red";
        }

        return null;
    }
});

const App = () => {
    return (
        <div>
            <TextBox backgroundcolor="blue">Hello World</TextBox>
            <TextBox isimportant={true}>Hello World</TextBox>
        </div>
    );
};

export default App;

참고

• https://material-ui.com/styles/basics/