Cách hiện đại để xử lý CSS trong React
Làm việc với React, bạn có rất nhiều sự lựa chọn khi xử lý việc tạo kiểu bằng CSS-in-JS. Bạn có thể tìm hiểu về rất nhiều tùy chọn có sẵn trong CSS-in-JS Roundup .
Hầu hết các thư viện đều có vòng đời. Họ trở nên phổ biến và sau đó họ được thay thế bởi một giải pháp tốt hơn.
Một trong những thư viện đang ở đỉnh cao phổ biến là 💅 styled-components .
Dễ dàng bắt đầu
Người tạo ra các thành phần được tạo kiểu cũng là người bảo trì bảng react-boilerplate , một trong những cách phổ biến nhất để cài đặt một dự án React.
Boilerplate bao gồm các thành phần được tạo kiểu và việc chỉ sử dụng boilerplate sẽ rất hợp lý nếu bạn đang bắt đầu một ứng dụng mới từ đầu.
Để bắt đầu, hãy sao chép repo:
$ git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git … Và sau đó cd vào đó và npm run setup .
Boilerplate cung cấp một ứng dụng ví dụ rất thuận tiện để bắt đầu tìm hiểu các thành phần được tạo kiểu.
Bắt đầu với npm start và truy cập ứng dụng của bạn tại http: // localhost: 3000 .
Các thành phần trong ứng dụng mẫu đã sử dụng các thành phần được tạo kiểu. Xem app/containers/App/index.js để biết ví dụ:
// ...other imports import styled from 'styled-components'; const AppWrapper = styled.div` max-width: calc(768px + 16px * 2); /* ... */ `; export default function App() { return ( <AppWrapper> {/* ... */} </AppWrapper> ); } Đây là Thành phần được tạo kiểu được liên kết với containers AppWrapper , chịu trách nhiệm hiển thị shell bọc trang. DOM được xuất ra sẽ là một phần tử div với kiểu được áp dụng.
Boilerplate sử dụng reload nóng, vì vậy bạn có thể chỉnh sửa một số thứ, lưu file và các thay đổi áp dụng cho trang.
Hãy thử đặt max-width tùy chỉnh thành 500px :
const AppWrapper = styled.div` max-width: 500px; /* ... */ `; và lưu file :
Bạn vừa chỉnh sửa Thành phần được tạo kiểu đầu tiên của bạn ! 🎉
Quên về lớp học
Như bạn thấy , không có gì liên kết kiểu bạn vừa chỉnh sửa với containers của nó. Không có className mà bạn đã sử dụng trong CSS để liên kết một kiểu với một phần tử.
Quy trình công việc thông thường khi xây dựng giao diện web với CSS là:
- Bạn tạo một cấu trúc HTML, với các lớp hoặc thuộc tính id duy nhất
- Bạn nhắm đến các phần tử trong trang bằng cách sử dụng bộ chọn lớp hoặc id trong CSS
Điều này đòi hỏi phải giữ cho chúng được đồng bộ, trong trường hợp bạn cần thay đổi chúng. Nó cũng yêu cầu bạn nghiên cứu một cấu trúc đặt tên có thể chứa tất cả các yếu tố của bạn.
Nếu bạn đang ở trong một group , điều này thường nghĩa là có các quy ước đặt tên có thể khó thực thi. Không phải khi đặt ra cấu trúc ban đầu của dự án, nhưng dễ dàng bỏ qua khi cần sửa chữa nhanh. các thành phần được tạo kiểu tạo các lớp nhanh chóng cho bạn, với các tên lớp duy nhất cho tất cả các phần tử của bạn.
Điều này đảm bảo không có kiểu nào có thể lọt ra ngoài cho các phần tử khác, giống như điều đó có thể xảy ra với việc sử dụng lại tên lớp trên toàn trang.
Nó chỉ là CSS
Một số thư viện CSS-in-JS hiện có cho phép bạn viết CSS bằng JavaScript dưới dạng các đối tượng JavaScript. Điều này đòi hỏi một số tải về nhận thức và đó là rào cản gia nhập đối với nhiều nhà thiết kế biết CSS nhưng không biết JavaScript.
các thành phần theo kiểu dựa trên các ký tự mẫu JavaScript để cho phép bạn viết CSS thực tế, có thể được sao chép đơn giản từ các file CSS của bạn.
Điều duy nhất cần lưu ý là các media query sử dụng "cú pháp đặc biệt", trong đó bạn bỏ qua bộ chọn, thay vì:
@media (max-width: 700px) { .app-wrapper { background: white; } } bạn viết:
const AppWrapper = styled.div` /* ... */ @media (max-width: 700px) { background: white; } `; Nó làm cho CSS dễ dàng hơn và tốt hơn
các thành phần được tạo kiểu là "chỉ CSS", nhưng là một CSS nâng cao hơn một chút.
Nó cho phép CSS lồng vào nhau , một trong những tiện ích chính của các bộ tiền xử lý CSS thông thường. Hãy thử nhanh, bằng cách lật bất kỳ hình ảnh nào trong trang:
const AppWrapper = styled.div` max-width: calc(768px + 16px * 2); /* ... */ img { transform: scaleX(-1); } `; 
Nó cũng xử lý các tiền tố của nhà cung cấp cho bạn bằng cách sử dụng tiền tố kiểu nội tuyến . Trong ví dụ trên, việc sử dụng transform sẽ thêm các tiền tố nhà cung cấp này vào CSS được tạo:
.fpcXGq img { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } Tùy chỉnh các thành phần
Nếu bạn muốn làm cho nút bên phải có màu xám thay vì màu xanh lam, bạn có thể dễ dàng overrides thuộc tính CSS cụ thể này. Các node là hai version của HeaderLink , là một thành phần Liên kết từ react react-router-dom với một số kiểu được áp dụng:
import { Link } from 'react-router-dom'; import styled from 'styled-components'; export default styled(Link)` /* ... */ border: 2px solid #41ADDD; color: #41ADDD; /* ... */ `; Bây giờ, nếu bạn muốn tạo một nút màu xám thì khá dễ dàng:
import styled from 'styled-components'; import HeaderLink from './HeaderLink'; const GrayHeaderLink = styled(HeaderLink)` color: darkgray; border: 2px solid darkgray; `; và bây giờ sử dụng thành phần này trong JSX của bạn, từ:
<NavBar> <HeaderLink to="/"> {/* ...children */} </HeaderLink> <HeaderLink to="/features"> {/* ...children */} </HeaderLink> </NavBar> đến:
<NavBar> <GrayHeaderLink to="/"> {/* ...children */} </GrayHeaderLink> <GrayHeaderLink to="/features"> {/* ...children */} </GrayHeaderLink> </NavBar> Cách tiếp cận này hoạt động tốt khi bạn không sở hữu các thành phần của bạn . Trong trường hợp này, Liên kết đến từ gói react-router-dom và ta không kiểm soát được nó.
Nếu không nó thậm chí còn đơn giản hơn. Đây là kiểu mặc định của một nút:
import { css } from 'styled-components'; const buttonStyles = css` /* ... */ border: 2px solid #41addd; color: #41addd; /* ... */ `; export default buttonStyles; Bạn sẽ nhận thấy việc sử dụng trình trợ giúp css , cho phép sử dụng các phép nội suy bên trong các-luật CSS của bạn.
Chèn một giá trị đơn giản vào trong khuôn mẫu sẽ cho phép ta có một kiểu khác trong một thành phần bằng cách chọn màu dựa trên giá trị chống đỡ:
const buttonStyles = css` /* ... */ border: 2px solid ${(props) => props.gray ? 'darkgray' : '#41addd'}; color: ${(props) => props.gray ? 'darkgray' : '#41addd'}; /* ... */ `; Sau đó, thành phần StyledButton được xuất bằng cú pháp như sau:
import styled from 'styled-components'; import buttonStyles from './buttonStyles'; const StyledButton = styled.button`${buttonStyles}`; export default StyledButton; Đến đây bạn có thể làm cho nút màu xám chỉ bằng cách viết:
<StyledButton gray /> Tìm hiểu thêm
Đây là đỉnh của tảng băng. các thành phần theo kiểu cho phép bạn thực hiện các cấu hình nâng cao hơn nhiều.
Tìm hiểu tất cả các thành phần được tạo kiểu có thể cung cấp trong tài liệu chính thức .
* Lưu ý các đoạn mã trong bài đăng này được lấy từ dự án React Boilerplate được cấp phép theo MIT và © 2017 Maximilian Stoiber. Bạn có thể tìm thấy một bản sao của giấy phép tại đây .
Các tin liên quan
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
