반응형
1. Inline Styles
기본적인 방법이지만, 앱이 복잡해질수록 사용하기 어려움
// 방식 1: 직접 기술
return (
<div style={{ width:"100%", padding: "16px" }}/>
)
// 방식 2: 사전 정의
const containerStyle = {
width: "100%",
padding: "16px",
};
return (
<div style={containerStyle}/>
)
2. CSS Modules
.css 또는 .scss 파일을 정의하는 방법
*.scss 파일 작성을 위해선(npm install node-sass)가 필요
- scss 파일 작성
.container {
border: solid 1px #aaa;
border-radius: 20px;
padding: 8px;
margin: 8px;
}
- 사용
import classes from "./CssModules.module.scss"; // 임의의 이름 지정 가능
export const CssModules = () => {
return (
<div className={classes.container}/>
);
};
3. Styled JSX
필요 모듈: styled-jsx
npm install styled-jsx
- 사용: styled jsx에서는 컴포넌트 안에 css을 기술함
export const StyledJsx = () => {
return (
<>
<style jsx>{`
border: solid 1px #aaa;
border-radius: 20px;
padding: 8px;
margin: 8px;
`}</style>
</>
);
};
4. Styled Components
필요 모듈:
npm install styled-components
className에 스타일을 적용한 컴포넌트를 정의.
import styled from "styled-components";
const StyledDiv = styled.div`
padding: "8px";
`;
사용 예시
<StyledDiv>
<p>사용 예시입니다</p>
</StyledDiv>
5. Emotion
styled components와 함께 인기가 많은 라이브러리.
다양하게 사용할 수 있다는 것이 장점.
필요 모듈:
npm install @emotion/react @emotion/styled
사용
// 방식 1 - 컴포넌트 파일 안에 css를 작성(styled jsx와 유사)
import {jsx, css} from "@emotion/react";
export const Emotion = () => {
const containerStyle = css`
border: solid 1px #aaa;
border-radius: 20px;
`;
return (
<div css={containerStyle}/>
);
}
// 방식 2 - 자바스크립트 객체로 스타일 정의(inline styles와 유사)
import {jsx, css} from "@emotion/react";
export const Emotion = () => {
//...생략...
const titleStyle = css({
margin: 0,
color: "#aaa"
});
return (
<div css={containerStyle}>
<p css={titleStyle}>Emotion</p>
</div>
);
}
// 방식 3 - styled components와 유사
import {jsx, css} from "@emotion/react";
import styled from "@emotion/styled";
export const Emotion = () => {
//...생략...
return (
<div css={containerStyle}>
<p css={titleStyle}>Emotion</p>
<SButton>버튼</SButton>
</div>
);
};
const SButton = styled.button`
background-color: #ddd;
border: none;
padding: 8px;
`;
댓글