Styled-components - (1)설치 및 기본 문법
4061 단어 Reactstyled componentsReact
설치 및 불러오기
- 설치
npm i styled-components
- 불러오기
import styled from "styled-components";
styled component css 적용 시 자동완성 기능
vscode-styled-components 익스텐션 설치하기!
기본 문법
const 작명(첫글자는 대문자) = styled.원하는태그`CSS코드`
- 예시
//App.js
import styled from "styled-components";
const Father = styled.div`
display: flex;
`
const BoxOne = styled.div`
background-color: teal;
width: 100px;
height: 100px;
`
const BoxTwo = styled.div`
background-color: tomato;
width: 100px;
height: 100px;
`
const Text = styled.span`
color: white;
font-size: 30px;
`
function App() {
return (
<Father>
<BoxOne>
<Text>Hello World!</Text>
</BoxOne>
<BoxTwo />
</Father>
);
}
export default App;
Author And Source
이 문제에 관하여(Styled-components - (1)설치 및 기본 문법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@starkdy/Styled-components-1설치-및-기본-문법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)