JSS集RGB backgroundColor

Question

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

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

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

Answer 1

创建一个以CSS键作为css属性名称和值的对象，如下所示。

记住，对象名称不能包含破折号，因此需要将属性(如camelCase 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"))

​

如果要使用造型-部件，就可以复制和粘贴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>

​