我知道您可以在Reaction类中指定样式,如下所示:

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

我是否应该以这种方式完成所有样式,并且在我的CSS文件中根本没有指定任何样式?

还是应该完全避免内联样式?

两者兼而有之似乎有些奇怪和混乱——在调整造型时,需要判断两个地方.

推荐答案

目前还没有太多的"最佳实践".对于Reaction组件,我们中使用内联样式的人还在进行大量的实验.

有很多不同的方法:React inline-style lib comparison chart

全要还是什么都不要?

我们所说的"风格",其实包括很多概念:

  • 布局-how an element/component looks in relationship to others
  • 外观-the characteristics of an element/component
  • 行为和状态-how an element/component looks in a given state

从国家风格开始

Reaction已经在管理您的组件的状态,这使得state and behavior的样式非常适合与您的组件逻辑放在一起.

不要使用条件状态类来构造组件,而是考虑直接添加状态样式:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

注意,我们正在使用一个类来设置appearance的样式,但是不再使用任何.is-前缀的类来表示state and behavior.

我们可以使用Object.assign(ES6)或_.extend(下划线/加斜线)添加对多个状态的支持:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

定制和可重用性

现在我们使用的是Object.assign,使我们的组件能够以不同的样式重用变得非常简单.如果我们想覆盖默认样式,可以在调用点使用props 进行覆盖,如下所示:<TodoItem dueStyle={ fontWeight: "bold" } />.实现方式如下:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

布局

就我个人而言,我看不出内联布局样式有什么令人信服的理由.现在有很多很棒的CSS布局系统.我只用一个就行了.

也就是说,不要将布局样式直接添加到组件.用布局组件包装组件.这里有一个例子.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

对于布局支持,我经常try 将组件设计为100% widthheight.

外貌

这是"内联式"辩论中最具争议性的领域.归根结底,这取决于您设计的组件和您的团队对JavaScript的满意程度.

有一点是肯定的,你将需要图书馆的帮助.浏览器状态(:hover:focus)和媒体查询在原始react 中是痛苦的.

我喜欢Radium,因为那些难的部分的语法是为模拟sass而设计的.

代码组织

通常,您会在模块外看到样式对象.对于待办事项列表组件,它可能如下所示:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

getter函数

向模板中添加一堆样式逻辑可能会有点混乱(如上所示).我喜欢创建getter函数来计算样式:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

进一步观察

今年早些时候,我在"欧洲react "(Reaction Europe)上更详细地讨论了所有这些问题:Inline Styles and when it's best to 'just use CSS'个.

I'm happy to help as you make new discoveries along the way :) Hit me up -> @chantastic

Css相关问答推荐

JavaFX如何在Tableview中使用默认和自定义的列标题CSS样式?

单独.css文件中的样式不适用于Angular 元件

在NextJS/Reaction应用程序中显示更新问题

如何将另一种自定义位置 colored颜色 添加到三角形CSS中?

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

下拉菜单未展开- bootstrap

如何仅在CSS中屏蔽具有多个形状的div框?

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 我怎样才能准确地获得虚构文本内容宽度的边距?

    Material UI Modal 因背景而变暗

    如何在 TypeScript 文件中导入 CSS 模块?

    使用 styled-components,我如何定位组件的子类?

    CSS,居中的 div,缩小以适应?

    你能用 JavaScript 控制 GIF 动画吗?

    css 单行或多行垂直对齐

    如何更改 Angular Material 上 mat-icon 的大小?

    如何在 CSS 中延迟 :hover 效果?

    弹性框中的边距折叠

    输入和文本字段中的背景 colored颜色

    使用 inline-block 换行?