Cách sử dụng Styled Component trong React
Khi sử dụng React, thông thường bạn sẽ lưu các kiểu của mình trong tệp CSS chung. Điều này có thể gây khó khăn cho việc xác định kiểu dáng cho các thành phần cụ thể, đặc biệt khi bạn đang làm việc trên một dự án lớn. Với các thành phần được tạo kiểu, việc tìm kiếm kiểu cho một thành phần cụ thể rất dễ dàng vì chúng nằm trong cùng một tệp với thành phần đó.
Hãy xem cách thiết lập và tích hợp các thành phần được tạo kiểu trong ứng dụng React của bạn.
Mục Lục
Cài đặt thư viện styled-components
Bạn có thể cài đặt các thành phần theo kiểu bằng cách chạy lệnh này trong thiết bị đầu cuối của mình:
npm i styled-components
Để cài đặt các thành phần theo kiểu bằng sợi, hãy chạy:
yarn add styled-components
Tạo một thành phần theo kiểu
Một thành phần được tạo kiểu giống như một thành phần React tiêu chuẩn, với các kiểu. Có nhiều ưu và nhược điểm của các thành phần được tạo kiểu, điều quan trọng là phải xem xét để sử dụng đúng cách.
Cú pháp chung trông như thế này:
import styled from "styled-components";
const ComponentName = styled.DOMElementTag`
cssProperty: cssValue
`
Ở đây bạn nhập khẩu theo kiểu từ thành phần theo kiểu thư viện. Các theo kiểu function là một phương thức nội bộ chuyển đổi mã JavaScript thành CSS thực tế. Các Tên thành phần là tên của thành phần được tạo kiểu. Các DOMElementTag là phần tử HTML/JSX mà bạn định tạo kiểu, chẳng hạn như div, span, button, v.v.
Để tạo nút được tạo kiểu bằng cách sử dụng thành phần được tạo kiểu, trước tiên bạn sẽ tạo thành phần React có chứa thành phần nút.
Như vậy:
import React from "react";function Button() {
return (
<button>Welcome!!!</button>
)
}
Bây giờ bạn có thể tạo kiểu cho nút bằng cách sử dụng các thành phần được tạo kiểu:
import styled from "styled-components";const StyledButton = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
Đặt mọi thứ lại với nhau, bạn sẽ cần phải thay thế cái nút gắn thẻ với Tạo KiểuNút thành phần:
import styled from "styled-components";
import React from "react";const StyledButton = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
function Button() {
return (
<StyledButton>Welcome!!!</StyledButton>
)
}
Kiểu làm tổ
Bạn cũng có thể lồng các kiểu khi làm việc với các thành phần được tạo kiểu. Các thành phần được tạo kiểu lồng nhau giống như sử dụng Ngôn ngữ mở rộng SASS/SCSS. Bạn có thể lồng các kiểu nếu một thành phần chứa nhiều thẻ phần tử và muốn tạo kiểu cho từng thẻ riêng lẻ.
Ví dụ:
import React from 'react';function App() {
return (
<div>
<h1>Styled Components</h1>
<p>Welcome to styled-components</p>
</div>
)
}
Mã này tạo một thành phần có chứa một h1 phần tử và một P yếu tố.
Bạn có thể tạo kiểu cho các phần tử này bằng cách sử dụng tính năng tạo kiểu lồng nhau của các thành phần được tạo kiểu:
import React from 'react';
import styled from 'styled-components';const StyledApp = styled.div`
color: #333333;
text-align: center;
h1 {
font-size: 32px;
font-style: italic;
font-weight: bold;
letter-spacing: 1.2rem;
text-transform: uppercase;
}
p {
margin-block-start: 1rem;
font-size: 18px;
}
`
function App() {
return (
<StyledApp>
<h1>Styled Components</h1>
<p>Welcome to styled-components</p>
</StyledApp>
)
}
Mã này sử dụng một thành phần được tạo kiểu và lồng kiểu dáng cho h1 Và P thẻ.
Tạo và sử dụng biến
Khả năng tạo biến là một tính năng đáng chú ý của thư viện styled-components. Khả năng này cấp kiểu dáng động, nơi bạn có thể sử dụng các biến JavaScript để xác định kiểu dáng.
Để sử dụng các biến trong các thành phần được tạo kiểu, hãy tạo một biến và gán giá trị thuộc tính CSS cho biến đó. Sau đó, bạn có thể sử dụng biến đó trực tiếp trong CSS của mình, chẳng hạn:
import styled from "styled-components";const MainColor = "red";
const Heading = styled.h1`
color: ${MainColor};
`;
function App() {
return (
<>
<Heading>Hello World!</Heading>
</>
);
}
Trong khối mã ở trên, văn bản “Chào thế giới!” sẽ hiển thị màu đỏ.
Lưu ý rằng ví dụ này chỉ sử dụng một biến JavaScript tiêu chuẩn trong một mẫu chữ kết hợp với thành phần được tạo kiểu. Đó là một cách tiếp cận khác với việc sử dụng các biến CSS.
mở rộng phong cách
Sau khi tạo một thành phần được tạo kiểu, bạn sẽ sử dụng thành phần đó. Bạn có thể muốn tạo sự khác biệt tinh tế hoặc thêm kiểu dáng trong một số trường hợp. Trong những trường hợp như thế này, bạn có thể mở rộng tệp style.
Để mở rộng các kiểu, bạn bọc thành phần đã tạo kiểu trong theo kiểu() constructor và sau đó bao gồm bất kỳ kiểu bổ sung nào.
Trong ví dụ này, các Nút chính thành phần kế thừa kiểu dáng của thành phần Nút và thêm màu nền khác là xanh lam.
import styled from "styled-components";
import React from "react";const Button = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
const PrimaryButton = styled(Button)`
background-color: blue;
`
function App() {
return (
<Button>Welcome</Button>
<PrimaryButton>Hello There!</PrimaryButton>
)
}
Bạn cũng có thể thay đổi thẻ mà thành phần được tạo kiểu hiển thị bằng cách sử dụng BẰNG một chỗ dựa.
Các BẰNG prop cho phép bạn chỉ định phần tử HTML/JSX cơ bản mà thành phần được tạo kiểu sẽ hiển thị dưới dạng đó.
Ví dụ:
import styled from "styled-components";
import React from "react";const Button = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
function App() {
return (
<Button as='a' href='#'>Welcome</Button>
)
}
Mã này làm cho Cái nút thành phần như một Một phần tử, thiết lập của nó href gán cho ‘#’.
Tạo kiểu toàn cầu
Các thành phần được tạo kiểu thường nằm trong phạm vi một thành phần, vì vậy bạn có thể tự hỏi làm thế nào để tạo kiểu cho toàn bộ ứng dụng. Bạn có thể tạo kiểu cho ứng dụng bằng cách sử dụng kiểu toàn cục.
Styled-Components cung cấp một tạoGlobalStyle chức năng cho phép bạn khai báo các kiểu trên toàn cầu. Các tạoGlobalStyle loại bỏ ràng buộc của kiểu dáng trong phạm vi thành phần và cho phép bạn khai báo các kiểu áp dụng cho mọi thành phần.
Để tạo kiểu toàn cầu, bạn nhập tạoGlobalStyle chức năng và khai báo các kiểu bạn yêu cầu.
Ví dụ:
import {createGlobalStyle} from 'styled-components';const GlobalStyles = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #343434;
font-size: 15px;
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
}
`
export default GlobalStyles;
Sau đó, bạn nhập khẩu phong cách toàn cầu thành phần vào thành phần ứng dụng của bạn và hiển thị nó. kết xuất phong cách toàn cầu thành phần trong thành phần ứng dụng của bạn sẽ áp dụng các kiểu cho ứng dụng của bạn.
Như vậy:
import React from 'react';
import GlobalStyles from './Global';function App() {
return (
<div>
<GlobalStyles />
</div>
)
}
Thêm vào các thành phần được tạo kiểu
Bạn đã học cách thiết lập, cài đặt và sử dụng styled-components trong ứng dụng React của mình. Thư viện styled-components là một cách hiệu quả để tạo kiểu cho ứng dụng React của bạn. Nó cung cấp nhiều tính năng hữu ích cho phép tạo kiểu linh hoạt và phong cách năng động.
Còn rất nhiều điều nữa cho các thành phần được tạo kiểu, chẳng hạn như hoạt ảnh và React là một khung lớn với nhiều thứ để tìm hiểu bên cạnh đó.