如何在反应js中为整个应用程序（大应用程序）应用内联样式

Question

我想为整个应用程序应用内联样式

应用程序非常大，所以我不想创建json对象并将其填充为样式

我想要这样的东西

Answer 1

在回应中，应用内联样式非常简单

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};


function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

您可以在此链接中阅读更多相关信息

https://reactjs.org/docs/dom-elements.html

对于非内联样式，您可以将css文件导入主要组件

import "path-to-your-style.css"; 

您可以通过不同的方式阅读此处，了解如何为您的React应用程序应用样式

https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

我希望这会对你有所帮助

Answer 2

你必须选择

第一个导入主应用程序或HTML文件中的CSS文件

<强> HTML：

<link rel="stylesheet" type="text/css" href="styles.css">

反应主应用

import './styles.css';

里面的

div{
  color: red !important
}

我更喜欢你使用!important将这个应用于整个div而没有任何麻烦。

第二个使用style-it

import React from 'react';
import Style from 'style-it';

class App extends React.Component {
  render() {
    return (
      <div>
        <Style>
          {`
            h1 {
              font-size: large;
              color: red
            }
         `}
        </Style>

       <h1>Hi</h1>
      </div>
    );
  }
}

export default App;