Chèn dữ liệu vào thuộc tính style từ object trong React

CSS style cho các phần tử cũng có thể được thêm vào bằng thuộc tính style. Trong bài học này và một vài bài tiếp theo chúng ta sẽ xem xét các phương pháp định kiểu inline.

Bây giờ chúng ta sẽ không kết nối file styles.css, mà sẽ truyền các giá trị tương ứng vào thuộc tính style dưới dạng object với các style cho mỗi thẻ, chúng ta sẽ viết trực tiếp trong file component.

Vậy, hãy lấy component của chúng ta không có CSS style, mà chúng ta đã làm trong bài học trước:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Hãy trong file App.js, trước lệnh return tạo một object với CSS style cho thẻ div trong biến class1. Hãy nhớ rằng tên các thuộc tính ở đây được viết bằng camelCase notation, và giá trị của thuộc tính cần được đặt trong dấu nháy kép:

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

Bây giờ hãy thêm object class2 với style cho đoạn văn đầu tiên:

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

Object class3 với style cho đoạn văn thứ hai:

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

Và cuối cùng là class4 cho đoạn văn cuối cùng:

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}

Bây giờ, để áp dụng trong component các CSS class, hãy sử dụng thuộc tính style. Cho đoạn văn đầu tiên chúng ta có biến class2, hãy truyền nó làm giá trị:

App.js<p style={class2}>text</p>

Tương tự, hãy thêm style từ các object cho các thẻ còn lại.

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

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}