1. Styled-Components là gì và nó có những lợi ích nào?

• Styled-Components là một thư viện giúp bạn có thể tổ chức và quản lý code CSS một cách dễ dàng trong các project React. Nó được xây dựng với mục tiêu giữ cho các styles của các components trong React gắn liền với chính các components đó. Nó cung cấp một interface rõ ràng và dễ sử dụng cho cả React và React Native. Nó không chỉ thay đổi việc implement các components trong React mà còn thay đổi cả lối tư duy trong việc xây dựng styles cho các component đó.

Styled-Components có thể được installed từ npm với cú pháp:

npm install styled-components

Và có thể được sử dụng qua việc import như sau:

import styled from 'styled-components';

2. Làm quen với Styled-Components qua ví dụ thực tế

2.1. Basic Component

Ta có thể xây dựng một basic component với Styled-Components như sau:

const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  `;
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
  `;

class Application extends React.Component {
  render() {
    return (
      <Wrapper>
      <Title>
        Hello World, this is my first styled component!
      </Title>
    </Wrapper>
    )
  }
}

Codepen

2.2. Passed props

Với Styled-Components, chúng ta cũng có thể truyền props vào cho các components:

const styled = styled.default; //normailly import from npm mmodules
const Input = styled.input`
	padding: 0.5em;
	margin: 0.5em;
	color: palevioletred;
	background: papayawhip;
	border: none;
	border-radius: 3px;
`;

class Application extends React.Component {
  render() {
    return (
      <div>
        <Input placeholder="@input_placeholder" type="text" />
        <Input value="@nvtcp9x" type="text" />
      </div>
    )
  }
}

Codepen

2.3. Adapting based on props

Chúng ta cũng có thể sử dụng props để quy định các css cho component:

const styled = styled.default; //normailly import from npm mmodules
const Button = styled.button`
	background: ${props => props.primary ? 'palevioletred' : 'white'};
	color: ${props => props.primary ? 'white' : 'palevioletred'};

	font-size: 1em;
	margin: 1em;
	padding: 0.25em 1em;
	border: 2px solid palevioletred;
	border-radius: 3px;
`;

class Application extends React.Component {
  render() {
    return (
      <div>
        <Button>Normal</Button>
        <Button primary>Primary</Button>
      </div>
    )
  }
}

Codepen

2.4. Animations

Để định nghĩa các animations, Styled-Components cung cấp cơ chế sinh ra các unique name cho các keyframes ở mỗi components, bởi vậy chúng ta sẽ không cần lo lắng về việc tên của keyframes có bị trùng hay không nữa:

const rotate360 = keyframes`
	from {
		transform: rotate(0deg);
	}

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

const Rotate = styled.div`
	display: inline-block;
	animation: ${rotate360} 2s linear infinite;
	padding: 2rem 1rem;
	font-size: 1.2rem;
`;
class Application extends React.Component {
  render() {
    return (
      <div>
        <Rotate>&lt; 💅 &gt;</Rotate>
      </div>
    )
  }
}

3. Kết luận

Như vậy trên đây mình đã giới thiệu tổng quan về styled-components và cách implement cơ bản của nó, qua đó, chúng ta cũng phần nào thấy được những lợi ích mà Styled-Component đem lại trong việc styled css cho các components trong react, một lựa chọn thú vị để quản lý code css trong project React phải không nào? Bạn cũng có thể tìm hiểu thêm về Styled-Components tại đây nhé: https://www.styled-components.com/ Thank for reading!