부트캠프교육중/react80 [React] dark모드, white모드의 첫걸음 # theme - 기본적으로 모든 색상들을 가지고 있는 object - 모든 색깔을 하나의 object 안에 넣어놨기때문에 매우 유용하다. 왜냐하면, 나중에 색깔을 바꿀때 그냥 그 object만 바꿔주면 된다. index.js에서 import { ThemeProvider } from "styled-components"; const darkTheme = { textColor:"whitesmoke", backgroundColor:"#111", } const lightTheme = { textColor:"#111", backgroundColor:"whitesmoke", } ReactDom.render( // 여기추가 // 여기추가 , document.getElementById("root") ); 그리고 app.. 2023. 8. 18. [React] styled component 활용 # Circle 컴포넌트에서 Box의 컴포넌트 css를 사용하려고 할때 이렇게 하면 Box의 모든걸 Circle에서도 쓴다. const Box = styled.div` background-color: ${(props)=> props.bgColor}; width: 100px; height: 100px; `; const Circle = styled(Box)` border-radius: 50px; `; # 어떤 component의 모든걸 같게 하고 싶지만, html 태그만 바꾸고 싶을때 const Btn = styled.button` color: tomato; `; Login Go home 이렇게 하면 button태그가 a태그로 바뀐다. # animation적용할거면 keyframes 이용해야 한다. cons.. 2023. 8. 18. [React] styled components에서 attrs # 모든 input에 적용될 attribute를 가지게 될거다. 그래서 attribute는 한번만 써줘도된다. const Input = styled.input.attrs({ required: true, minLength: 10 })` background-color: red; `; 이렇게 하면 attrs 뒤의 속성이 모든 input에 다 담긴다. 2023. 8. 18. [React] styled component에서 props 활용하기 # styled component에서 props활용하기 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; `; function App() { return ( Hello ); } export default App; 위의 BoxOne 코드와 .. 2023. 8. 17. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음