我在React组件中广泛使用内联样式。我发现在组件中搭配样式非常清楚，因为组件有什么样式，没有什么样式总是很清楚的。此外，拥有Javascript的全部功能确实简化了更复杂的样式需求。

一开始我并不相信，但在尝试了几个月后，我完全转换了，并且正在将我所有的CSS转换为内联或其他js驱动的CSS方法。

Facebook员工和React贡献者“vjeux”的演示也很有帮助- https://speakerdeck.com/vjeux/react-css-in-js

TLDR -使用css在js解决方案(如情感或样式组件)，享受最好的css和js所提供的

在css或scss文件中，很难管理动态样式。在内联样式标签中，不能使用媒体查询或伪选择器。

在JS中使用CSS，你可以享受两全其美。JS中的Css之于Css有点像React之于HTML。它允许在JS代码中以对象或字符串的形式编写css，并享受javascript生态系统的强大功能和工具。

到目前为止，js库中有一些受欢迎的、得到良好支持的CSS，包括Emotion、styles - components和镭。

让我们比较一下样式化简单元素时代码的样子。我们将设置“hello world”div的样式，这样它在桌面上显示大，在移动端显示小。

使用style属性

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

由于媒体查询在样式标签中是不可能的，我们必须向元素中添加一个className并添加一个css规则。

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

使用Emotion的10 CSS标签

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion还支持模板字符串和样式化组件。所以如果你喜欢，你可以这样写:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

“JS中的CSS”背后使用的是CSS类。

最佳实践

以下是我推荐的一些最佳实践:

在JS中使用CSS解决方案 在JS中构造样式代码与构造一般的代码非常相似。例如:

识别重复的样式，并将它们写在一个地方。在Emotion中有两种方法:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

React编码模式是封装组件- HTML和JS，控制组件被写在一个文件中。这是你的css/样式代码样式的组件属于。 必要时，为组件添加样式道具。通过这种方式，您可以重用在子组件中编写的代码和样式，并通过父组件对其进行定制以满足您的特定需求。

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

2020年更新:最好的做法是使用一个已经为你完成了艰苦工作的库，并且在你进行转换时不会杀死你的团队，正如本视频中最初接受的答案所指出的那样(它仍然相关)。为了了解趋势，这是一个非常有用的图表。在做了自己的研究之后，我选择在我的新项目中使用Emotion，它被证明是非常灵活和可扩展的。

鉴于2015年投票最多的答案是推荐镭，现在已经进入维护模式。因此，增加一些备选方案似乎是合理的。停止使用镭的帖子建议使用几个图书馆。每个链接的网站都有现成的示例，所以我将避免在这里复制和粘贴代码。

Emotion which is "inspired by" styled-components among others, uses styles in js and can be framework agnostic, but definitely promotes its React library. Emotion has been kept up to date as of this post. styled-components is comparable and offers many of the same features as Emotion. Also actively being maintained. Both Emotion and styled-components have similar syntax. It is built specifically to work with React components. JSS Yet another option for styles in js which is framework agnostic though it does have a number of framework packages, React-JSS among them.

有时候，我们需要从组件中样式化一些元素，但如果我们必须只显示该组件的一个元素，或者样式是如此之少，那么我们不使用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伪选择器和媒体查询。

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

我建议使用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;