我知道你可以在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文件中指定的样式吗?

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

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


当前回答

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

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

其他回答

这取决于你的应用程序有多大,如果你想使用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文件,特别是包含该组件的所有样式选项(并且仅针对该组件)。

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

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

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

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

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

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

我建议使用CSS模块。

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

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

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