Styled-Component trong React

• 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.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;