我知道你可以在React类中指定样式,像这样:

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

我应该瞄准这样做的所有样式,并没有在我的CSS文件中指定的样式吗?

或者我应该完全避免内联样式?

这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。


当前回答

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

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

我建议使用CSS模块。

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

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

其他回答

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

style属性的主要用途是动态的、基于状态的样式。例如,您可以在进度条上基于某种状态设置宽度样式,或者基于其他内容设置位置或可见性。

JS中的样式限制了应用程序不能为可重用组件提供自定义样式。在前面提到的情况下,这是完全可以接受的,但当您更改可见特征时,尤其是颜色。

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

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

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

有时候,我们需要从组件中样式化一些元素,但如果我们必须只显示该组件的一个元素,或者样式是如此之少,那么我们不使用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;

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

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