반응형
모듈 설치
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;
참고
반응형
'Development > React' 카테고리의 다른 글
[React] ETC (0) | 2019.08.29 |
---|---|
[React] setupProxy (0) | 2019.05.29 |
[React] styled-components (0) | 2019.05.28 |
[React] i18next (2) | 2019.05.24 |
[React] useContext (0) | 2019.05.23 |