Chuyển đổi css thành các thành phần theo kiểu

Styled-component là thư viện CSS-in-JS tuyệt vời dành cho ReactJS. Nó giúp bạn có thể tùy biến và quản lý mã CSS một cách dễ dàng

Settings Styled-components as after

# with npm
npm install styled-components

# with yarn
yarn add styled-components

Styled-components cơ bản

Khi làm việc với Styled-component, các thành phần được viết trong tệp với đuôi. ts or. js

Với các ví dụ bên dưới mình sẽ tạo các thành phần trong kiểu tệp. js

Sau đó bạn phải thực hiện xuất, nhập

Create an component by styled-components

import styled from 'styled-components';
// Tạo một component Title và nó sẽ render ra thẻ h1 với các styles
const Title = styled.h1`
  font-size: 16px;
  text-align: center;
  color: black;
`;

// Tạo một component Wrapper và nó sẽ render ra thẻ section với các styles
const Wrapper = styled.section`
  padding: 60px;
  background: blue;
`;

// Sử dụng Title và Wrapper như là một React component
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

đạo cụ

You can also transfer props through a component as React to can CSS variable

import styled from 'styled-components';
// Tạo một Button với các styles như sau:
const Button = styled.button`

/* ở đây nhận vào một props primary dùng toán tử 3 ngôi để kiểm tra và set giá trị cho background */

  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  padding: 0.25em 1em;
  border: none;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

Một ví dụ khác cho việc vượt qua đạo cụ

// Tạo một input component
const Input = styled.input`
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

render(
  <div>
    <Input defaultValue="Không màu" type="text" />
    <Input defaultValue="Có màu" type="text" inputColor="rebeccapurple" />
  </div>
);

mở rộng phong cách

Là một cách dễ dàng để tạo ra một thành phần mới được thiết kế kế thừa các kiểu của thành phần cũ

import styled from 'styled-components';
// Tạo một component Button có màu blue
const Button = styled.button`
  color: blue;
  font-size: 1em;
  border: none;
  border-radius: 3px;
`;

// Tạo một RedButton kế thừa những style từ Button component phía trên và ghi đè, thêm mới một số styles
const RedButton = styled(Button)`
  color: red;
  border-color: red;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <RedButton>Red Button</RedButton>
  </div>
);

Tạo kiểu cho bất kỳ thành phần nào

Tính năng này giúp chúng ta có thể CSS cho một thành phần bất kỳ ví dụ như Link trong React-router-dom

import styled from 'styled-components';
// Thực hiện việc import Link từ React-router-dom
// Tạo một component mới kế thừa từ Link component
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Link chưa được CSS</Link>

    <StyledLink>Sau khi CSS</StyledLink>
  </div>
);

Bộ chọn CSS

Trong Styled-components có thể sử dụng các CSS selector cơ bản như > , + , ~

And using Nesting as SASS

import styled from 'styled-components';
const Thing = styled.div`
  color: blue;
  /* & ở đây đại diện cho thẻ div được hiểu như sau div:hover */
  &:hover {
    color: red; // <Thing> khi hover vào thẻ div
  }

  & ~ & {
    background: tomato; // <Thing> nằm phía sau không trực tiếp của <Thing>
  }

  & + & {
    background: lime; // <Thing> nằm phía sau trực tiếp của <Thing>
  }

  &.something {
    background: orange; // <Thing> có class .something
  }

  & .something {
    border: 1px solid; // element có class .something nằm bên trong <Thing>
    display: block;
  }

  .something-else & {
    border: 1px solid; // <Thing> nằm bên trong của element có class .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>
)

Ảnh động

import styled from 'styled-components';
import { keyframes } from 'styled-component';
// Tạo keyframes
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

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

// áp dụng vào animation css
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

render(
  <Rotate>💅🏾</Rotate>
);

Sử dụng Styled-component trong React như thế nào ?

Kết luận

Trên đây là các tính năng cơ bản của Styled-components. Mặc dù cơ bản nhưng nó đủ để bạn có thể ứng dụng vào ReactJS rồi