James K Nelson在他的信“为什么你不应该用JavaScript样式化React组件”中指出，实际上没有必要使用内联样式及其缺点。他的观点是，旧的无趣的CSS加上较少的/scss是最好的解决方案。他的论文中支持CSS的部分:

可扩展的外部 可分割(内联样式超越一切) define_image_transformation

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

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>
        )
    }
}

你可以使用内联样式，但你会有一些限制，如果你在所有的样式中使用它们，一些已知的限制是你不能在那里使用CSS伪选择器和媒体查询。

你可以用镭来解决这个问题，但我觉得随着项目的发展，它会变得很麻烦。

我建议使用CSS模块。

使用CSS模块，你将有在CSS文件中写CSS的自由，不必担心命名冲突，这将由CSS模块照顾。

这种方法的一个优点是，它为特定组件提供了样式化功能。这将为下一个开发人员创建更易于维护的代码和可读的项目架构。

这取决于你的应用程序有多大，如果你想使用webpack这样的捆绑器，在构建中将CSS和JS捆绑在一起，以及你想如何管理你的应用程序流!最后，取决于你的情况，你可以做出决定!

在大型项目中，我对组织文件的偏好是将CSS和JS文件分开，这可能更容易共享，更容易让UI人员浏览CSS文件，也更整洁地组织整个应用程序的文件!

始终以这种方式思考，确保在开发阶段所有东西都在它们应该在的地方，正确命名，并且易于其他开发人员找到……

我个人会根据自己的需要来混合它们，比如…… 尝试使用外部css，但如果需要React也会接受style，你需要将它作为一个带有key value的对象传递，如下所示:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

有时候，我们需要从组件中样式化一些元素，但如果我们必须只显示该组件的一个元素，或者样式是如此之少，那么我们不使用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是不推荐的。我们在基于JSS的项目中使用了样式组件。它通过在组件上添加动态类名来保护css覆盖。您还可以根据传递的道具添加css值。