ReactJs-从根注入CSS

如何解决ReactJs-从根注入CSS

这似乎是一个非常简单的问题，但我今天仍然无法回答。

我需要从根本上做起import index.css;中的main.tsx之类的事情。这样，我应该可以从 root 的任何子级执行以下操作：

<div className="anyStyle" />

但是，到目前为止，我只能从“侧面CSS”导入。我确实知道Reactjs主要是为了每个组件都具有tsx / css而设计的，但是对于用例，我需要有所不同：）

谢谢

解决方法

您可以将css文件导入父组件，并且该文件应应用于每个子组件。您可以使用像webpack这样的捆绑程序来读取css导入并适当地加载load a css file with webpack guide

import '../styles.css'

export default function App() {
    return (
        <main></main>
    )
}

您也可以直接在html中导入css样式。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="root"></div>
<script type="text/javascript" src="react.js"></script>
</body>
</html>

简单的webpack配置：

module.exports = {
  entry: {
    bundle: './src/app.tsx'
  },resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['*','.ts','.tsx','.js']
  },module: {
      rules: [
          /*
           * Typsecript files. 
           */
          {
              test: /\.ts(x?)$/,exclude: /node_modules/,use: [
                  {
                      loader: "ts-loader"
                  }
              ]
          },{
            enforce: "pre",test: /\.js$/,loader: "source-map-loader"
        },/*
           * misc Files. 
           */
          {
              test: /\.(png|svg|jpg|gif|ttf|otf)$/,use: [
                'file-loader'
              ]
          },/*
           * CSS Files. 
           */
          {
              test: /\.css$/,use: [
                'style-loader','css-loader',"postcss-loader"
            ]
          }
      ]
  },plugins: [
  ],output: {
    path: path.resolve(__dirname,'dist'),filename: '[name].js'
  },};

使用npm下载：

npm i style-loader css-loader postcss-loader

您可以使用webpack，您可能已经这样做了，当您将项目基于create-react-app时，它也已经包括在内了：）

有了这个，您可以像导入其他任何组件一样简单地导入一个css文件。假设您有一个index.css内容如下：

.anyStyle: {
  margin: 20px;
}

您现在可以在任何组件中执行以下操作：

import React,{ Component } from 'react';
import './index.css';

class Main extends Component {
  render() {
    return <div className="anyStyle" />;
  }
}

编辑：这是一个链接，解释如何使用css-loader with webpack以及如何在webpack.config中对其进行配置，该文件已经是create-react-app afaik的一部分。