JSS 设置 RGB 背景颜色答案

【问题标题】：JSS Set RGB backgroundColorJSS 设置 RGB 背景颜色
【发布时间】：2018-07-31 02:39:42
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs jss

【解决方案1】：

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

请记住，对象名称不能包含破折号，因此您需要将 background-color 等驼峰式属性转换为 backgroundColor

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>

【讨论】：