Styled-Components trong React

Styled-components là một thư viện CSS-in-JS phổ biến cho phép bạn viết CSS trực tiếp trong JavaScript. Nó giúp xây dựng các component có style độc lập và dễ tái sử dụng trong React.

1. Styled-components là gì?

Styled-components là một thư viện CSS-in-JS cho phép bạn: Viết CSS trực tiếp trong file JavaScript. Viết CSS trực tiếp trong file JavaScript. Tăng cường khả năng scoped styles mà không cần sử dụng CSS Modules.

Cài đặt Styled-components:

npm install styled-components	

2. Cách sử dụng Styled-components

2.1. Tạo một Styled Component

import styled from 'styled-components';	
		
// Tạo một component với style	
const Button = styled.button`	
	  background-color: #4caf50;	
	  color: white;	
	  padding: 10px 20px;	
	  font-size: 16px;	
	  border: none;	
	  border-radius: 5px;	
	  cursor: pointer;	
		
	  &:hover {	
	    background-color: #45a049;	
	  }	
`;	
		
function App() {	
	  return <Button>Click Me!</Button>;	
}	
		
export default App;	

Giải thích:

• styled.button: Tạo một button với style được chỉ định.
• &:hover: Áp dụng style khi người dùng hover vào button.

2.2. Truyền Props vào Styled Component

Styled-components hỗ trợ truyền props để thay đổi style động.

import styled from 'styled-components';	
		
const Button = styled.button`	
	  background-color: ${(props) => (props.primary ? '#4caf50' : '#e7e7e7')};	
	  color: ${(props) => (props.primary ? 'white' : 'black')};	
	  padding: 10px 20px;	
	  border-radius: 5px;	
`;	
		
function App() {	
	  return (	
	    <div>	
	      <Button primary>Primary Button</Button>	
	      <Button>Secondary Button</Button>	
	    </div>	
	  );	
}	

Giải thích:

• Sử dụng props.primary để áp dụng màu sắc khác nhau.
• Tính linh hoạt trong việc thay đổi style dựa trên props.

3. Styled-components với Component khác

Bạn có thể style một component đã có sẵn bằng Styled-components.

import styled from 'styled-components';	
		
const Input = styled.input.attrs({	
	  type: 'text',	
	  placeholder: 'Nhập nội dung...',	
})`	
	  border: 1px solid #ccc;	
	  padding: 8px;	
	  border-radius: 4px;	
	  margin-top: 10px;	
		
	  &:focus {	
	    border-color: #4caf50;	
	  }	
`;	
		
function App() {	
	  return <Input />;	
}	

Giải thích:

• attrs giúp bạn thêm thuộc tính mặc định cho component (ví dụ: type, placeholder). Sử dụng pseudo-classes như &:focus để thêm style tương tác.

4. Tạo Global Styles

Styled-components cũng hỗ trợ Global Styles để áp dụng style chung cho toàn ứng dụng.

import { createGlobalStyle } from 'styled-components';	
		
const GlobalStyle = createGlobalStyle`	
	  body {	
	    margin: 0;	
	    font-family: 'Arial', sans-serif;	
	    background-color: #f5f5f5;	
	  }	
`;	
		
function App() {	
	  return (	
	    <>	
	      <GlobalStyle />	
	      <h1>Hello Styled-components</h1>	
	    </>	
	  );	
}	

Giải thích:

• createGlobalStyle: Tạo style toàn cục.
• Global styles chỉ cần khai báo một lần và sẽ áp dụng cho toàn bộ ứng dụng.

5. So sánh Styled-components và CSS Modules

6. Ưu và Nhược điểm của Styled-components

Ưu điểm:

• Scoped styles mặc định.
• Hỗ trợ dynamic styles dựa vào props.
• Dễ dàng tạo Global Styles.
• Dễ bảo trì và mở rộng.

Nhược điểm:

• Kích thước bundle có thể tăng nếu sử dụng nhiều.
• Có thể gặp khó khăn khi debugging class name đã được tạo tự động.

7. Công cụ hỗ trợ Styled-components

• Styled-components VSCode Extension: Hỗ trợ syntax highlight.
• Babel Plugin: Giúp tối ưu code.

Cài đặt Babel Plugin:

npm install --save-dev babel-plugin-styled-components	

Cấu hình .babelrc:

{	
	 "plugins": ["babel-plugin-styled-components"]	
}	

##8. Khi nào nên sử dụng Styled-components?

• Khi bạn muốn viết CSS trong JavaScript.
• Khi cần styles linh hoạt dựa trên props.
• Khi dự án yêu cầu khả năng mở rộng và dễ bảo trì.

9. Kết luận

Styled-components là một thư viện mạnh mẽ, linh hoạt và thân thiện với React. Nó giúp bạn viết CSS một cách rõ ràng, không bị xung đột, và dễ dàng duy trì.