js内联风格最佳实践

我知道你可以在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类，而是在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;

2019-08-01 10:12:46

其他回答

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

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

我建议使用CSS模块。

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

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

2018-07-19 06:59:42

内联样式的问题是内容安全策略(CSP)越来越普遍，不允许使用内联样式。因此，我建议完全避免使用内联样式。

更新: 为了进一步解释，CSP是服务器发送的HTTP报头，用于限制页面上可以出现的内容。这只是进一步的缓解措施，可以应用到服务器上，以阻止攻击者在开发人员对站点编写糟糕的代码时做一些调皮的事情。

The purpose of most of these restrictions is to stop XSS (cross-site scripting) attacks. XSS is where an attacker figures out a way to include his own javascript on your page (for example, if I make my username bob<SCRIPT>alert("hello")</SCRIPT> and then post a comment, and you visit the page, it shouldn't show an alert). Developers should deny the ability to have a user add content like this to the site, but just in case they made a mistake, then CSP blocks the page from loading if it finds any script> tags.

CSP只是对开发人员的额外保护级别，以确保如果他们犯了错误，攻击者不会对该站点的访问者造成问题。

所以这一切都是XSS，但如果攻击者不能包括<script>标签，但可以包括<style>标签或在标签上包含style=参数呢?然后，他可能会改变网站的外观，使您被骗点击错误的按钮，或者出现其他问题。这不是什么大问题，但仍然需要避免，CSP可以为您做到这一点。

用于测试CSP站点的一个很好的资源是https://securityheaders.io/

你可以在http://www.html5rocks.com/en/tutorials/security/content-security-policy/上阅读更多关于CSP的信息

2015-03-19 01:06:33

无论如何，内联css是不推荐的。我们在基于JSS的项目中使用了样式组件。它通过在组件上添加动态类名来保护css覆盖。您还可以根据传递的道具添加css值。

2020-05-03 13:49:43

我通常有与每个React组件相关联的scss文件。但是，我不明白为什么你不封装组件与逻辑，并查看它。我的意思是，你有类似的web组件。

2015-06-19 08:13:41

JSX中的样式与HTML中的样式非常相似。

HTML的例子:

Div style="background-color: red;颜色:白色”