Notice
Recent Posts
Recent Comments
Link
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- ๋ณด์กฐ์ ๋ ฌ
- NPM
- MSSQL
- react
- Kotlin
- Sqoop
- JavaScript
- mapreduce
- GIT
- Spring
- Eclipse
- mybatis
- SQL
- table
- vaadin
- SPC
- SSL
- Express
- Java
- es6
- IntelliJ
- plugin
- Android
- hadoop
- R
- tomcat
- xPlatform
- ๊ณต์ ๋ฅ๋ ฅ
- Python
- window
Archives
- Today
- Total
DBILITY
react styled component ๋ณธ๋ฌธ
๋ฐ์ํ
https://styled-components.com/
์ธ๋ถ์ css,scss๋ฅผ ๋ง๋ค๊ณ id,class๋ก ์ฐธ์กฐํ์ง ์๊ณ , ์ฝคํฌ๋ํธ ๋ด๋ถ์์ ์ฝคํฌ๋ํธ๋ฅผ ์ด๋ฆ์ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ ์ง์ ํ๋ ๊ฒ์ด๋ค. ๋ง์ด ๋ณต์กํ๋ค. ๋ด๋ถ์ ์๊ธฐ ๋๋ฌธ์ ์ ์ญ์ ์ผ๋ก ์ค์ฒฉ(๊ผฌ์ด๋ใ ใ )๋์ง ์๊ฒ ์ฌ์ฉํ ์ ์๋ค. ์ด๊ฒ ์ ๋ถ์ธ๊ฐ?
์ผ๋จ ์ค์นํ๋ค.
npm install styled-components
์ฝคํฌ๋ํธ๋ด์์ ์ฌ์ฉํ style์ ๋์ถฉ ๋ง๋ค์ด ๋ณธ๋ค.
import styled from "styled-components";
const Example = (props) => {
const bgColor = "yellow";
const MyButton = styled.button`
background: ${bgColor};
color: black;
height: 40px;
padding: 5px;
border-radius: 5px;
margin-top: 10px;
`;
const MyBox = styled.div`
background: grey;
padding: 20px;
border-radius: 5px;
margin: 10px;
`;
const ExtendButton = styled(MyButton)`
background: red;
`;
return (
<div>
<MyButton>styled component</MyButton>
<MyBox>styled component</MyBox>
<ExtendButton>styled component</ExtendButton>
</div>
);
}
typescript๋ฅผ ์ฌ์ฉํด ๋ณด๋ ค๊ณ ํ๋ type๋จผ์ ์ค์นํ๋ค
npm i -D @types/styled-components
npm i styled-components
๊ฐ๋ณ๊ฒ ๋ค์๊ณผ ๊ฐ์ ์ค๋ฅ๊ฐ ๋จ..
npm ERR! Cannot read properties of null (reading 'edgesOut')
npm i styled-components@5.3.11
ํ์ฌ ์ต์ 6.0.0-rc3์ด๋ค. ๊ทธ๋ฅ 5.3.11๋ก ์ค์นํ๋ ๋๋ค.
props๋ฅผ ์ฌ๋ฌ๊ฐ ๋ฐ์ผ๋ ค๋ฉด interface๊ฐ ํ์ํ๋ค๊ณ ๋ค๋ฅธ ๋ถ๋ค์ด ์ ์ด ๋จ๋๋ฐ, ํ์ฌ ์์ ์
๊ทธ๋ฅ object type์ ๋ฃ์ด๋ ๋๋๋ฐ? ์ด๋๊ฐ ๊ณ ์ฅ์ธ๊ฐ?
import React, {JSX} from 'react';
import styled from "styled-components";
function Example(): JSX.Element {
const bgColor: string = "yellow";
const MyButton = styled.button<{ bgColor: string }>`
background: ${props => props.bgColor};
color: black;
height: 40px;
padding: 5px;
border-radius: 5px;
margin-top: 10px;
`;
const MyBox = styled.div`
background: grey;
padding: 20px;
border-radius: 5px;
margin: 10px;
`;
interface MyButtonInterface {
bgColor:string,
color:string
}
const ExtendButton = styled(MyButton)<MyButtonInterface>`
background: ${props => props.bgColor};
color: ${props => props.color};
`;
const ExtendButton2 = styled(MyButton)<{ bgColor:string, color:string }>`
background: ${props => props.bgColor};
color: ${props => props.color};
`;
return (
<div>
<MyButton bgColor={bgColor}>styled component</MyButton>
<MyBox>styled component</MyBox>
<ExtendButton bgColor={'red'} color={'white'}>styled component</ExtendButton>
<ExtendButton2 bgColor={'white'} color={'red'}>styled component</ExtendButton2>
</div>
);
}
export default Example;
๋ฐ์ํ
'front-end & ui > react' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
react react-toastify (0) | 2023.06.09 |
---|---|
react redux redux-toolkit (0) | 2023.04.13 |
react cors proxy (0) | 2023.03.09 |
react v18 UseTransition, useDeferredValue hook (0) | 2022.06.07 |
react file upload, dropzone (0) | 2022.04.13 |
๊ณต์ ํ๊ธฐ ๋งํฌ
Comments