CSS를 이용한 스타일 지정 (with Material-UI)
2021. 1. 19. 22:12ㆍ프론트엔드/React.js
728x90
가장 기본적인 CSS 적용 방법
function ComponentA() {
return (
<div style={{ display: 'block' }}>
</div>
);
}Element의 style prop을 이용하여 스타일을 적용할 수 있습니다.
클래스 적용 방법
우선 클래스를 어딘가에 선언하고 불러와야 합니다.
생성된 css파일이 mycss.css라고 할 때, 다음과 같이 적용 가능합니다.
// 방법 1: html파일에서 css파일을 로드한다.
<html>
<head>
...
<link rel="stylesheet" href="%PUBLIC_URL%/mycss.css" />
...
// 방법 2: javascript파일에서 css파일 import
import './mycss.css';CSS파일을 적용했다면, Element의 className prop을 이용하여 설정할 수 있습니다.
function ComponentA() {
return (
<div className="myClass1 myClass2">
</div>
);
}
Material-UI를 이용해서 CSS를 적용 하는 방법
일반 css에서처럼 스타일을 지정할 수 있습니다.
import {makeStyles} from "@material-ui/core/styles";
import {createStyles} from "@material-ui/core";
const useStyles = makeStyles((theme) => createStyles({
something: {
color: '#000000',
},
}));
const NewComponent = props => {
const classes = useStyles();
return (
<div className={classes.something}>
abc
</div>
)
}
'프론트엔드 > React.js' 카테고리의 다른 글
| Javascript - var / let / const (0) | 2021.05.31 |
|---|---|
| 알아두면 좋은 JavaScript 활용법 (해체 표현식, 화살표 함수 등) (0) | 2021.01.26 |
| Material UI 적극 활용해보기 (0) | 2021.01.26 |
| State의 활용 (0) | 2021.01.21 |
| 컴포넌트란 (0) | 2021.01.19 |