Quartz 🪬

Attributes of a JSX Element

2 min read

Class Name

Có thể thêm class name cho các JSX element thông qua thuộc tính className (không thể dùng class vì trùng với từ khóa class của JS):

const header = (
	<header className='header'>
		{title}
		{subtitle}
		{links}
	</header>
)

Style

Để thêm CSS style vào một JSX element, ta có thể thêm trực tiếp (inline) vào trong element đó thông qua thuộc tính style.

Giá trị của thuộc tính style là một object, với các property là các CSS property. Các key của property cần được chuyển sang camelCase.

const header = (
	<header style={{ backgroundColor: '#fdc9dd', padding: '16px', textAlign: 'center' }}>
		{title}
		{subtitle}
		{links}
	</header>
)

Có thể tách thành một object riêng rồi truyền vào JSX element như sau:

const style = {
	backgroundColor: '#fdc9dd',
	padding: '16px',
	textAlign: 'center'
}
 
const header = (
	<header style={style}>
		{title}
		{subtitle}
		{links}
	</header>
)

Khi làm việc với React, chúng ta thường sử dụng inline style hoặc internal style. Tuy nhiên, nếu muốn sử dụng external CSS, ta vẫn có thể tạo ra một file CSS:

/* index.css */
header {
	background-color: '#fdc9dd';
	padding: '16px';
	border-radius: '8px';
	text-align: 'center';
}

Sau đó import vào như sau:

import './index.css'
list
from [[Attributes of a JSX Element]]
sort file.ctime asc

Backlinks