reactjs - JSS 设置 RGB 背景颜色

Question

如果我有一个由 redux 状态获取的 RGB 值，我如何使用这些值来设置带有 JSS 的元素的背景颜色？

let color = {
     r: 255,
     g: 255,
     b: 0,
}

<div style={color}>asdf</div>

Answer 1

使用 CSS 创建一个对象，其键为 css 属性名称和值，如下所示。

请记住，对象名称不能包含破折号，因此您需要驼峰式属性，例如background-colorintobackgroundColor

CodeSandBox 上的工作演示

let style = {
	color: "rgb(255, 0, 0)",
	backgroundColor: "rgb(255, 255, 0)"
}

class TodoApp extends React.Component {
 
  render() {
    return (
      <div>
        <div style={style}>asdf</div>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

如果您要使用styled-components，您可以照原样复制和粘贴 CSS。

import React from 'react';
import styled from 'styled-components';

const Content = styled.div`
  color: rgb(255, 0, 0);
  background-color: rgb(255, 255, 0);
`

class TodoApp extends React.Component {
 
  render() {
    return (
      <div>
        <Content>asdf</Content>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>