開発ログ2週目(反応)
1878 ワード
1.画面をきれいに撮ろう!styled-components 명령어:yarn add styled-components```
import React from 'react';
// 패키지에서 styled를 불러올게요!
import styled from 'styled-components';
function App() {
return (
<div className="App">
{/* props로 bgColor를 줘볼까요! */}
<MyStyled bgColor를={"red"}>hello React!</MyStyled>
</div>
);
}
// scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있습니다!
// props 주는 방법! 이제 알고 있죠?
const MyStyled = styled.div`
width: 50vw;
min-height: 150px;
padding: 10px;
border-radius: 15px;
color: #fff;
&:hover{
background-color: #ddd;
}
background-color: ${(props) => (props.bgColor를 ? "red" : "purple")};
`;
export default App;
2.ライフサイクル
명령어:yarn add styled-components```
import React from 'react';
// 패키지에서 styled를 불러올게요!
import styled from 'styled-components';
function App() {
return (
<div className="App">
{/* props로 bgColor를 줘볼까요! */}
<MyStyled bgColor를={"red"}>hello React!</MyStyled>
</div>
);
}
// scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있습니다!
// props 주는 방법! 이제 알고 있죠?
const MyStyled = styled.div`
width: 50vw;
min-height: 150px;
padding: 10px;
border-radius: 15px;
color: #fff;
&:hover{
background-color: #ddd;
}
background-color: ${(props) => (props.bgColor를 ? "red" : "purple")};
`;
export default App;
Reference
この問題について(開発ログ2週目(反応)), 我々は、より多くの情報をここで見つけました https://velog.io/@moomoomo/개발일지-2주차리액트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol