styled-components 구글링

# styled-components에서 css 변수 사용하기 (var)

css 변수를 사용하면 자주 쓰는 컬러 팔렛트를 만들어 오타 없이 코딩을 할 수 있습니다. 이를 조금 더 확장하면 다크 모드 같이 state 하나로 앱, 웹의 전체 theme을 바꾸는 기능도 수월하게 만들 수 있습니다.

이번 글에서는 nextJS에서 styled-components와 var 기능을 사용하여 손 쉽게 스타일 값을 변수화 하는 방법에 대해 알아보겠습니다!

dependence 설치

yarn add node-sass
yarn add styled-components

 

팔렛트 scss 생성

스타일을 변수화 할 scss 파일을 만들어줍니다.

// src/styles/common.scss

:root {
  --primary-color: #2294e3;
  --border-color: #9a9a9a;
}

 

_app.tsx에서 scss import

import "../styles/common.scss";
...

 

위처럼 next에서는 _app.tsx, react에서는 index.tsx에 사용하는 scss를 Import 해주면 사용 완료입니다.

styled-components에서 사용하기

import styled from "styled-components";

const Test = () => {
  return <TestBlock>var test 화면</TestBlock>;
};

const TestBlock = styled.article`
  background: var(--primary-color);
`;

참고 블로그 

styled-components에서 css 변수 사용하기 (var), react, redux

---

 

# Styled-Component로 하위 엘리먼트 css 입히기

일단 Toggle이라는 이름의 styled-component를 만들어보자

 

const Toggle = Styled.div``

 

이제 백틱 사이에 css 넣으면 css 가 지정된 엘리먼트를 사용할 수 있음

 

const Toggle = Styled.div`
    background:transparent;
    border-color:transparent;
`

 

여기서 Toggle 컴포넌트 안에 다른 엘리먼트들이 들어가 있을 때

 

            <Toggle>
                <input
                    type="checkbox"
                    id="nav-toggle"
                    className="nav-toggle"
                />
                <label htmlFor="nav-toggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
            </Toggle>

 

styled-components로 안에 들어 있는 엘리먼트들에 한번에 css 를 입힐 수 있다.

 

styled-component안에서는 & 라는 기호의 의미가 스스로 (class 컴포넌트안의 this 같은 느낌) 라서  & 뒤에 > 표로 안으로 접근할 수 있다.

 

const Toggle = Styled.div`
    background:transparent;
    border-color:transparent;

    & > .nav-toggle{
        display:none;
    }

참고 블로그

Styled-Component로 하위 엘리먼트 css 입히기

---

# styled-components에서 style확장(재사용)하기

import React from "react";
import styled from "styled-components";

const App = () => (
  <Container>
    <Apple />
    <GreenApple />
    <BlueApple />
  </Container>
);

const Apple = ({ className }) => <div className={className}>Apple!</div>;

const Container = styled.div`
  display: flex;
`;

const GreenApple = styled(Apple)`
  background-color: green;
`;

const BlueApple = styled(Apple)`
  background-color: blue;
`;

export default App;

참고 블로그

[react package] styled-components에서 style확장(재사용)하기

&

const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`   color: blue;   &:hover {     color: red; // <Thing> when hovered   }   & ~ & {     background: tomato; // <Thing> as a sibling of <Thing>, but maybe not directly next to it   }   & + & {     background: lime; // <Thing> next to <Thing>   }   &.something {     background: orange; // <Thing> tagged with an additional CSS class ".something"   }   .something-else & {     border: 1px solid; // <Thing> inside another element labeled ".something-else"   } ` render(   <React.Fragment>     <Thing>Hello world!</Thing>     <Thing>How ya doing?</Thing>     <Thing className="something">The sun is shining...</Thing>     <div>Pretty nice day today.</div>     <Thing>Don't you think?</Thing>     <div className="something-else">       <Thing>Splendid.</Thing>     </div>   </React.Fragment> )

Hello world! How ya doing? The sun is shining... Pretty nice day today. Don't you think? Splendid.

const Input = styled.input.attrs({ type: "checkbox" })``; const Label = styled.label`   align-items: center;   display: flex;   gap: 8px;   margin-bottom: 8px; ` const LabelText = styled.span`   ${(props) => {     switch (props.$mode) {       case "dark":         return css`           background-color: black;           color: white;           ${Input}:checked + && {             color: blue;           }         `;       default:         return css`           background-color: white;           color: black;           ${Input}:checked + && {             color: red;           }         `;     }   }} `; render(   <React.Fragment>     <Label>       <Input defaultChecked />       <LabelText>Foo</LabelText>     </Label>     <Label>       <Input />       <LabelText $mode="dark">Foo</LabelText>     </Label>     <Label>       <Input defaultChecked />       <LabelText>Foo</LabelText>     </Label>     <Label>       <Input defaultChecked />       <LabelText $mode="dark">Foo</LabelText>     </Label>   </React.Fragment> )

FooFooFooFoo

 

• && a double ampersand alone has a special behavior called a "precedence boost"; this can be useful if you are dealing with a mixed styled-components and vanilla CSS environment where there might be conflicting styles:

• const Thing = styled.div`
     && {
       color: blue;
     }
   `
  
  
   const GlobalStyle = createGlobalStyle`
     div${Thing} {
       color: red;
     }
   `
  
  
   render(
     <React.Fragment>
       <GlobalStyle />
       <Thing>
         I'm blue, da ba dee da ba daa
       </Thing>
     </React.Fragment>
   )
  

  I'm blue, da ba dee da ba daa

If you put selectors in without the ampersand, they will refer to children of the component.

const Thing = styled.div`
  color: blue;


  .something {
    border: 1px solid; // an element labeled ".something" inside <Thing>
    display: block;
  }
`


render(
  <Thing>
    <label htmlFor="foo-button" className="something">Mystery button</label>
    <button id="foo-button">What do I do?</button>
  </Thing>
)

Mystery buttonWhat do I do?