对于某些组件，使用内联样式更容易。此外，我发现它更容易和更简洁(因为我使用Javascript而不是CSS)动画组件样式。

对于独立组件，我使用“扩展操作符”或“…”。对我来说，它清晰、美丽，在狭小的空间里也能工作。下面是我制作的一个加载动画来展示它的好处:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

2019年11月

在这个行业(一家财富500强公司)工作，我不允许做任何内联样式。在我们的团队中，我们认为内联样式是不可读和不可维护的。而且，在亲眼看到内联样式如何使支持应用程序变得完全无法忍受之后，我不得不同意这一点。我完全反对内联样式。

你也可以使用StrCSS，它可以创建独立的类名等等!示例代码如下所示。你可以(可选)从Visual Studio市场安装VSCode扩展来支持语法高亮显示!

来源:strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

有时候，我们需要从组件中样式化一些元素，但如果我们必须只显示该组件的一个元素，或者样式是如此之少，那么我们不使用CSS类，而是在react js中使用内联样式。reactjs的内联样式和HTML的内联样式是一样的，只是属性名略有不同

使用style={{prop:"value"}}在任何标签中写入样式

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

根据您的配置，内联样式可以为您提供热重载。每次样式改变时，网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此，我相信你可以为CSS + SCSS设置一个热重载环境。

我所做的是为每个可重用组件提供一个唯一的自定义元素名称，然后为该组件创建一个CSS文件，特别是包含该组件的所有样式选项(并且仅针对该组件)。

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

在文件'custom-component.css'中，每个条目都以custom-component标签开始:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件，其他人更容易将其主题化以匹配他们网页的其余部分。

我更喜欢使用样式化组件。为设计提供了较好的解决方案。

import React, { Component, Fragment } from 'react'
import styled from 'styled-components';

const StyledDiv = styled.div`
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size:200; // here we can set static
    color: ${props => props.color} // set dynamic color by props
`;

export default class RenderHtml extends Component {
    render() {
        return (
            <Fragment>
                <StyledDiv color={'white'}>
                    Have a good and productive day!
                </StyledDiv>
            </Fragment>
        )
    }
}