Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Đã đăng vào thg 2 22, 2018 3:14 SA 2 phút đọc 2 phút đọc

CSS Stylesheet

Đơn giản là bạn chỉ cần import file CSS vào component bạn muốn style.

Ví dụ ta có file DottedBox.css như sauDottedBox.css như sau

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

Để dùng CSS này style cho component DottedBox, ta import file này vào component DottedBox.DottedBox, ta import file này vào component DottedBox.

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;

Inline styling

Với React, inline style không được thể hiện bằng một string mà bằng một object.

Ví dụ component Box:Box:

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (

Get started with inline style

); export default Box;

Ta có thể tạo biến để lưu những style object này và truyền vào element bằng style={tenBien} hoặc ta có thể style trực tiếp element ví dụ style={{color: 'pink'}}.style={tenBien} hoặc ta có thể style trực tiếp element ví dụ style={{color: 'pink'}}.

CSS Modules

Với việc dùng CSS Module tên class và animation được giới hạn để chỉ apply cho riêng một component.

Ví dụ file DashedBox.css:DashedBox.css:

:local(.container) {
  margin: 40px;
  border: 5px dashed pink;
}

:local(.content) {
  font-size: 15px;
  text-align: center;
}

:local(.tenClass) khi dùng với create-react-app và .tenClass khi không dùng với create-react-app. Ta import file CSS vào component và access tên class trong file CSS giống như ta access một object vậy. khi dùng với create-react-app.tenClass khi không dùng với create-react-app. Ta import file CSS vào component và access tên class trong file CSS giống như ta access một object vậy.

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (
  

Get started with CSS Modules style

); export default DashedBox;

Như ở trên apply style của class container cho một div với . Tên của class trong file CSS sẽ tự động trở thành tên class của element mà nó style. Ta cũng cần cấu hình Webpack để CSS module hoạt động.. Tên của class trong file CSS sẽ tự động trở thành tên class của element mà nó style. Ta cũng cần cấu hình Webpack để CSS module hoạt động.

. . .
{
 test: /\.css$/,
 loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .

Kết quả có được sau khi build là tên class của CSS và element đều là duy nhất với hash code đi kèm.

HTML

Get started with CSS Modules style

CSS

.DashedBox__container__1DA66 {
  margin: 40px;
  border: 5px dashed pink;
}

.DashedBox__content__X37D1 {
  font-size: 15px;
  text-align: center;
}

Styled-components

Styled-components là một thư viện dành cho React và React Native giúp cho việc viết style CSS ngay trong một component.

Xét component FormWrapper sau:FormWrapper sau:

import React from "react"
import styled from "styled-components"

const Input = styled.input`
 background: green
`

const FormWrapper = () => 

export default FormWrapper
  • Đầu tiên ta cần cài đặt style-component npm install styled-components --save hoặc yarn add styled-componentsnpm install styled-components --save hoặc yarn add styled-components
  • Import Styled-components vào component import styled from 'styled-components'import styled from 'styled-components'
  • Tạo những wrapper dùng để style element bằng style.`style cua element` và sử dụng chúng để renderstyle.`style cua element` và sử dụng chúng để render

Kết quả sau khi build ta cũng được html và CSS với tên class là duy nhất.

HTML

Send

CSS

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
0

Styled-components là một thư viện dành cho React và React Native giúp cho việc viết style CSS ngay trong một component.

Xét component FormWrapper sau:

Đầu tiên ta cần cài đặt style-component npm install styled-components --save hoặc yarn add styled-components

Import Styled-components vào component import styled from 'styled-components'

JSX mang đến cho chúng ta sự tiện lợi khi kết hợp cú pháp HTML và JavaScript trong một file trong React. và Nó cũng cho phép chúng ta viết mã CSS ben trong tệp React JSX của bạn. Tuy nhiên, có 1 số nhược điểm khi bạn cố gắng Debug các component theo style của bạn. Trong bài viết này mình sẽ giới thiệu 1 số cách style component dể việc debug dễ dàng hơn. (go)

Bắt đầu

Đầu tiên chúng ta hãy xây dựng 1 component như sau :

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
1

và 1 file CSS

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
2

sau đó ta thu được kết quả như sau :

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Okay . giờ mình muốn làm cho tile APeach Baby Doll có màu khác thì phải làm như thế nào ?APeach Baby Doll có màu khác thì phải làm như thế nào ?

Chúng sẽ truyền cho Content.jsx 1 props và đặt tên là skyblue

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
3

Bây giờ , chúng ta có thể thay đổi các thuộc tính CSS của Content.jsx dựa trên skyblue . Mình sẽ giới thiệu cho các bạn 2 phương pháp thêm các thuộc tính CSS mới thông qua CSS chung

Inline Style

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
4

Như bạn có thể thấy , mình lấy skyblue như một điều kiện để thêm các thuộc tính CSS vào đối tượng .Sau đó chúng ta inject đối tượng kiểu như một kiểu inline style. Bây giờ kết quả sẽ như thế này.

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Màu của tiêu đề bây giờ là màu xanh da trời như yêu cầu .

Bây giờ chúng ta sẽ chuyển qua cách thứ 2.

Thêm các Class CSS mới

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
5

Mình đã tạo một lớp CSS được gọi là content--skyblue. Điều này là đơn giản để làm cho màu xanh da trời. Mình muốn thêm lớp này vào tiêu đề* Chú chó con dễ thương*. Những gì chúng ta đang làm là tạo một mảng để lưu trữ các lớp CSS, sau đó sử dụng phương thức join để phân chia các lớp với spave. Vì vậy, bây giờ, className sẽ như thế nàyjoin để phân chia các lớp với spave. Vì vậy, bây giờ, className sẽ như thế này

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
6

Nhìn vào 2 cách trên bạn có thể thấy rằng chúng không tiện sửa đổi đặc biệt khi gặp trường hợp UI phức tạp. Không ai muốn viết nhiều câu điều kiện để style cho các component của mình phải không nào ? Đó là lý do tại sao mình muốn giới thiệu đến các bạn Styled-components

Styled-components

Use the best bits of ES6 and CSS to style your apps without stress Các style Component là 1 thư viện giúp bạn dễ dàng thay đổi các thuộc tính CSS. Bạn chỉ cần install chúng qua npm hoặc yarn bằng câu lệnh sau : Các style Component là 1 thư viện giúp bạn dễ dàng thay đổi các thuộc tính CSS. Bạn chỉ cần install chúng qua npm hoặc yarn bằng câu lệnh sau :

npm install styled-components --save hoặc yarn add styled-components

Sau đó sử dụng styled-components để styles cho components của bạn. chúng ta sẽ tiếp tục thực hiện với ví dụ trên.

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
7

Để sử dụng được chúng ta cần import styled-components vào component của mình. Chúng ta import nó như là một tên gọi styled. Sau đó chúng ta định nghĩa phần tử HTML nào sẽ được sử dụng cho từng thành phần được style . Ví dụ

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
8

Nó có nghĩa là components Button này là viết tứ theo styled-component render 1** ** . Sau đó chúng ta chỉ cần di chuyển các thuộc tính CSS đến từng styled-component . Nó cực kì đơn giản như vậy thôi.

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Tiếp theo làm như thế nào để thay đổi tiêu đề bằng cách sử dụng styled-component?

Các styled-compoent tận dụng lợi thế của các ES6 template literals.

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  

Get started with CSS styling

); export default DottedBox;
9

Chúng ta truyền props skyblue cho component Title chúng được xây dựng với các styled-components. Chúng ta có thể truyền 1 hàm cho các thuộc tính CSS mà chúng ta muốn sửa đổi thông qua các template literals.

Như bạn thấy chúng ta sử dụng 1 arrow funtion

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (

Get started with inline style

); export default Box;
3 để xác định trong điều kiện nào thì Title là màu xanh da trời.

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js
Bây giờ bạn hãy mở Chrome Devtools để xem điều gì sẽ xảy ra khi chúng ta xây dựng component với các styled-component .
Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Các Styled-components được xây dựng 1 hệ thống CSS module tích hợp, điều nay là vời để giải quyết các vấn đề xung đột tên lớp. Tuy nhiên, chúng ta không chắc chắn những lớp nào là chúng ta đang sử dụng khi chúng là muốn debug. Ngoài ra khi kiểm tra chức năng render trong Context.jsx

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (

Get started with inline style

); export default Box;
0

Bạn có biết chúng ta đang sử dụng phần từ HTML nào không? hoàn toàn không, phải không? Bạn phải nhìn lại từng styled-components để kiểm tra xem phần tử HTML nào đang sử dụng. Điều đó thực sự gây phiền nhiễu. Ngoài ra, khi bạn xây dựng các components theo kiểu theo cách này, về cơ bản, bạn chỉ cần từ bỏ các tính năng mạnh mẽ của các bộ chọn CSS.

Từ các vấn đề ở trên, Mình muốn giới thiệu 1 phương pháp đơn giải để xây dựng 1 styled-component theo kiểu debug, kết hợp CSS chúng với styled-components.

Kết hợp CSS selectors với Styled-components

Chúng ta chỉ cần thêm các ClassName vào các component chung và dễ dàng style chúng với styled-components.ClassName vào các component chung và dễ dàng style chúng với styled-components.

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (

Get started with inline style

); export default Box;
1

Chúng ta cần swap Content.jsx thông qua prop className và chúng ta có thể style cho nó với mẫu này:

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (

Get started with inline style

); export default Box;
2

Sau đó chúng ta có thể swap bất kì component nào vào styled-component, Ngoài ra chúng ta cũng có thể sử dụng sức mạnh của các CSS selector bên trong styled-component. Thậm chí, cú pháp CSS có sẵn trong styled-components. Để xem điều đó sảy ra như thế nào khi chúng ta mở console trong Chrome Devtools. Bây giờ các class đã có ý nghĩa, và chúng ta vẫn được hưởng lợi từ hệ thống CSS module do các className prop. Nói đơn giản chúng ta chỉ cần quan tâm các class name CSS bên trong component. Và kết quả Cuộc sống chưa bao giờ tươi đẹp đến thế

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js
Cuộc sống chưa bao giờ tươi đẹp đến thế
Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Hướng dẫn css-in-js react example - ví dụ về phản ứng css-in-js

Tóm lại

Chúng ta đã đi tìm hiểu về 2 phương pháp style cho Component thông qua CSS theo kiểu truyền thống. Sau đó, chúng ta đã học được cách style cho Component dễ dàng với styled-components . Cuối cùng, chúng ta đã kết hợp các CSS selector với styled-components . Bây giờ các Component có thể dễ dàng style và cũng có thể Debug.

Nguồn : https://medium.freecodecamp.org/how-to-build-a-debuggable-styled-component-10f7e4fbea2