Làm việc với Inline Styles

Trong React, Inline Styles không được chỉ định dưới dạng chuỗi(string). Thay vào đó, chúng được chỉ định với một đối tượng(object) có key là phiên bản camelCase của tên kiểu và có giá trị là giá trị của kiểu, thường là một chuỗi:

const loveStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // lưu ý viết hoa 'W' ở đây
  msTransition: 'all' // 'ms' là tiền tố nhà cung cấp chữ thường duy nhất
};

ReactDOM.render(<div style={loveStyle}>Hello World!</div>, mountNode);

Các khóa kiểu được camelCase để phù hợp với việc truy cập các thuộc tính trên các nút DOM từ JS (ví dụ: node.style.backgroundImage). Tiền tố nhà cung cấp bắt đầu bằng chữ in hoa. Đây là lý do tại sao WebkitTransition có chữ hoa "W".