스타일이 지정된 구성 요소 <💅>

  • Styled Component는 React 및 React Native용으로 빌드된 라이브러리입니다.
    응용 프로그램에서 구성 요소 수준 스타일을 사용할 수 있습니다.
  • 스타일 구성 요소는 태그가 지정된 템플릿 리터럴을 기반으로 합니다. 즉, 백틱 사이에 CSS 코드가 작성됩니다.

  • 설치


  • npm으로npm install styled-components
  • 실로yarn add styled-components

  • 사용하기 전에 가져오기


    import styled from styled-components ;

    기본 스타일 구성 요소



    Create Button Component with the help of styled-components and can be reuse anywhere without worrying about its CSS.


  • 버튼.jsx

  • import styled from "styled-components";
    
    const StyledButton = styled.button`
      border: 2px solid #4caf50;
      background-color: #4caf50;
      color: white;
      padding: 15px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
      transition: 0.5s all ease-out;
    `;
    
    export default StyledButton;
    


  • App.jsx

  • function App() {
      return (
        <div className="App">
          <StyledButton>Styled Button</StyledButton>
        </div>
      );
    }
    




    소품이 있는 스타일이 지정된 구성 요소



    Pass a function to a styled components template literal to adapt it based on its props.


  • 버튼.jsx

  • import styled from "styled-components";
    
    const StyledButton = styled.button`
      border: 2px solid #4caf50;
      background-color: #4caf50;
      color: white;
      background-color: ${(props) =>
        props.variant === "outline" ? "#fff" : "#4caf50"};
      color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
      padding: 15px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
      transition: 0.5s all ease-out;
    `;
    export default StyledButton;
    


  • App.jsx

  • function App() {
      return (
        <div className="App">
          <StyledButton>Styled Button</StyledButton>
          <div>
            <br />
          </div>
          <StyledButton variant="outline">Styled Button</StyledButton>
        </div>
      );
    }
    




    스타일 확장



    To easily make a new component that inherits the styling of another, just wrap it in the styled() constructor.


  • Button.js

  • import styled from "styled-components";
    
    export const StyledButton = styled.button`
      border: 2px solid #4caf50;
      background-color: ${(props) =>
        props.variant === "outline" ? "#fff" : "#4caf50"};
      color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
      padding: 15px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      cursor: pointer;
      transition: 0.5s all ease-out;
    `;
    
    export const FancyButton = styled(StyledButton)`
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
      border: none;
    `;
    


  • App.jsx

  • function App() {
      return (
        <div className="App">
          <StyledButton>Styled Button</StyledButton>
          <div>
            <br />
          </div>
          <StyledButton variant="outline">Styled Button</StyledButton>
          <div>
            <br />
          </div>
          <FancyButton as="a">Fancy Button</FancyButton>
          {/* as - is a polymorphic prop => pass anchor tag */}
        </div>
      );
    }
    




    결론


  • Styled Components는 기능적이고 재사용 가능한 방식으로 실행할 수 있는 다양한 기능을 제공하여 구성 요소와 스타일 간의 격차를 해소하는 CSS-in-JS 도구입니다.
  • 문서: https://styled-components.com/docs
  • 좋은 웹페이지 즐겨찾기