根 React Javascript 的样式背景颜色

Question

有人知道如何在 React 中设置 root 的样式吗？我知道可以通过执行以下命令在 JQuery 中完成；

$(":root").css("background-color", "yellow");

Answer 1

这是一个例子，App 是我的根元素。

import './App.css';
class App extends Component {

  render() {
    const backStyle = style({
      background: 'black'
    })
    return (
      <div className={backStyle}>
      ...
      </div>
    );
  }
}

export default App;

您可以在 App.css 中定义 css 属性，例如背景颜色。 有很多方法可以做到这一点。

return (
  <div style={{background: black}}>
  ...
  </div>
);

定义根的样式非常相似。即

import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

你可以做一件事。在你的index.html中，你可以使用样式标签来设置根div的样式。 它会做你想做的事。由于所有组件都在根包装器中加载，因此它将像全局样式一样。

Answer 3

您可以直接访问项目的全局 CSS 中的 root，例如为其指定背景颜色

:root {
  background-color: dimgray;
}