스타일 구성 요소 React Js

13436 단어 reactproductivityhtmlcss
Hello Guyz 오늘은 React의 Styled-Components에 대해 이야기하려고 합니다.
Styled Components는 기본적으로 반응 애플리케이션의 스타일을 쉽고 구조화하기 위한 ES6과 CSS3의 혼합물입니다.
재사용 가능한 스타일링 구성 요소를 만드는 데 도움이 될 수 있습니다. 구성 요소를 한 번 작성하고 프로그램의 어느 곳에서나 사용한다는 의미입니다.
이를 통해 JSX 파일에 완전한 CSS 스타일을 작성하고 CSS 스타일로 명명된 구성요소를 생성할 수 있습니다.

예를 들어 이것들을 이해하자 -

예 1 - 일반 스타일링




import React, { useState } from "react";
import styled, { css , keyframes } from "styled-components";

function App() {

  const Title = styled.h1`
    color: whitesmoke;
    background-color: darkslateblue;
    font-size: 2rem;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    text-align: center;
    &:hover {
      background-color: slateblue;
    }
  `;
returb (
  <Title>
  <h1>Hello</h1>
 </Title>
</div>
  );
}
export default App;


출력 -




  • 보시다시피 Title이라는 구성 요소를 만든 다음 ".h1"과 함께 "styled"키워드를 사용했습니다. 이는 스타일이 지정된 구성 요소에 속하고 스타일을 지정하는 구성 요소는 "h1"태그임을 의미합니다
    • .
  • 백틱을 사용했습니다 "" to represent the block of code for styled components as it is easy to use backticks when dealing with dynamic changes.
  • Then we provide the styling as normal css and you can also see that we have use the hover property inside it using "&" symbol.
  • Then we used the "Title" Component and inside it we have write the string Hello world.
    •

    예 2 - 후크를 사용하여 동적으로 스타일 변경

    
import React, { useState } from "react";
import styled, { css , keyframes } from "styled-components";

function App() {
  const [display, setDisplay] = useState(false);

 const Title = styled.h1`
    color: whitesmoke;
    background-color: darkslateblue;
    font-size: 2rem;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    text-align: center;
    display: grid;
    grid-template-columns: ${display ? "repeat(2,1fr)" : 
                           "repeat(1,1fr)"};
  `;

const Button = styled.button`
    display: inline-block;
    color: palevioletred;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    display: block;
  `;

  const SideTitle = styled.h1`
    font-size: 1.5rem;
    color: white;
    text-align: center;
    display: ${display ? "block" : "none"};
    margin: 0.5em 0 0.7em 0;
  `;
returb (
  <Title>
  <h1>Hello</h1>
  <SideTitle>
    <form className='flex space-x-5'>
      <label>Search</label>
      <input type="text" name="name" placeholder='search...' 
           className='ring-2 ring-blue-400 rounded-lg 
           focus:outline-none px-4' />
    </form>
  </SideTitle>
 </Title>
</div>
  );
}
export default App;

    출력 -


    • As you can see we have used an hook called "display" and set it's state to false initially.
    • Then in the styling part we have used this display hook with "grid-template-columns" property of css , when the display hook is set to true , then there will be 2 columns in the element and when the display hook is set to false , there will be only 1 column in the element .
    • Then we did the styling for a button and another component named SideTitle.
    • Inside SideTitle styling , we have again used the display hook to change the display property of this element to dynamically.
    • Then we have used our component inside componenet and inside it we have created a form with a label and an input fielt(The styling of input is done by tailwind css).
    • Then we have created a button which will toggle the state of display hook between true and false.
    • When the display hook is set to true , the form will be visible and when it is set to false , the form will be hidden.

    예 3 - 애니메이션

    import React from "react";
import styled, { keyframes } from "styled-components";

function App() {
  // Create the keyframes
  const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

  // Here we create a component that will rotate everything we pass in over two seconds
  const Rotate = styled.div`
    display: flex;
    animation: ${rotate} 2s linear infinite;
    padding: 2rem 1rem;
    font-size: 1.2rem;
    justify-content: center;
  `;

  return (
    <div>
      <Rotate>Animation</Rotate>
    </div>
  );
}

export default App;

    출력 -

    • As you can see , we have used the keyframes word to create a keyframe named "rotate" for our animation.
    • Then we have created a Rotate component and inside it we have used the css animation property and passed that "rotate" keyframe to this property.
    • Then we have used that Rotate component and passed a text inside it which will animated according to the keyframes we have created above.

    문서 -

    https://styled-components.com/docs

    Thats it for this post.
    THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
    ^^You can help me by some donation at the link below Thank you👇👇 ^^
    ☕ --> https://www.buymeacoffee.com/waaduheck <--

    Also check these posts as well
    코드 2020의 출현 - 2일차
    JSON 파서

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage