Làm việc với CSS styles trong thuộc tính style ở React

Trong các bài học trước, vào thuộc tính style chúng ta đã truyền một biến chứa một đối tượng với các CSS styles. Có thể không sử dụng biến trung gian, mà viết trực tiếp đối tượng ngay trong thuộc tính - trong trường hợp này chúng ta cần hai cặp dấu ngoặc nhọn - cái đầu tiên dành cho việc chèn JSX, còn cái thứ hai - dành cho đối tượng.

Vậy, hãy lấy component React của chúng ta không có CSS styles:

App.jsfunction App() {
  return (
    <div>
      <p>văn bản</p>
      <p>văn bản</p>
      <p>văn bản</p>
    </div>
  );
}

Ví dụ, hãy viết trực tiếp các thuộc tính CSS cho đoạn văn đầu tiên của component React App của chúng ta:

App.js<p style = {{
  color: 'orangered',
  fontWeight: 'bold' }}>
  văn bản
</p>

Tương tự như vậy, hãy thêm styles cho các thẻ còn lại.

Kết quả, code của component sẽ trông như sau:

App.jsfunction App() {
  return (
    <div style = {{
      width: '200px',
      border: '2px solid brown',
      padding: '10px',
      textAlign: 'center' }}>
      <p style={{
        color: 'orangered',
        fontWeight: 'bold' }}>
        văn bản
      </p>
      <p style = {{
        fontStyle: 'brown',
        color: 'brown' }}>
        văn bản
      </p>
      <p style = {{
        backgroundColor: 'orange',
        fontWeight: 'bold',
        color: 'white' }}>
        văn bản
      </p>
    </div>
  );
}