Question

我目前正在使用带有React的CSS模块进行造型。因此，我的每个组件都在其中导入特定于组件的css文件，如下所示：

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

这样在设计单个组件时效果很好，但是如何应用不是特定于组件的全局样式（html，正文，标题标记，div等）？

Answer 1

由于您使用的是ES6导入语法，因此您可以使用相同的语法导入样式表

import './App.css'

此外，您可以使用:global包装您的班级以切换到全局范围（这意味着CSS模块不会对其进行模块化，例如：在其旁边添加随机ID）

:global(.myclass) {
  background-color: red;
}

Answer 2

这可以通过简单地添加：

来完成

require('./App.css');

（感谢@elmeister正确回答了这个问题。）

Answer 3

我发现全局导入样式的唯一方法是添加：

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

返回render方法。

否则，style标记将添加到<head>，并且样式将应用于所有下一个路线。

来自https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

也许可以将样式从文件导入为字符串，以使代码更有条理。

Answer 4

如果你想使用 css 模块，另一种简单的方法是：

<style jsx global>{`
     .slick-prev:before,
     .slick-next:before {
         color: somecolor;
      }
`}</style>

Answer 5

我遇到了同样的问题，发现了以下解决方法，您可以选择最适合自己的方式

在您的webpack配置中定义两组规则以解析css / less 文件。
- 第一个规则应该包括所有全局样式，假设它保存在/ styles /或类似目录中。
- 第二条规则是处理所有本地范围内的css样式，理想情况下，这些样式应紧接其组件。
- 您可以通过在定义规则时使用包含和排除选项来实现此目的
- 或通过强制执行命名约定并相应地编写规则，例如，所有css模块都将为 [name] .module.css ，而您的测试将检查 /。module。（较少| css）$ / 并对其进行解析。

示例如下：

static void Main(string[] args)
{
    Console.WriteLine("Generator A starting value: ");//put 65
    string generatorAValue = Console.ReadLine();
    Console.WriteLine(MakeFirstStageCalculations(Convert.ToDecimal(generatorAValue), 16807));
}

public static int MakeFirstStageCalculations(decimal value, decimal coefficient, decimal division = 2147483647)
{

    decimal multiplicationValue = value * coefficient;
    decimal remainder = MakeRemainder(multiplicationValue, division); //first remainder starting value if value is 65 i posted what values should be returned. 
    int donein = 0; // how long while loop needed to complete.
    #if DEBUG
    int goodvalue = 0;
    #endif
    while (remainder != 0)
    {
        remainder = MakeRemainder(remainder, division);//PROBLEM IS RIGHT HERE,it should return new remained and overwrite.
        Console.WriteLine(remainder);

        #if DEBUG
        if (goodvalue == 10)
        {
            break;
        }
        goodvalue++;
        #endif
        donein++;
    }
    /*First 4 remainder values should be:
     * 1092455
     * 1181022009
     * 245556042
     * 1744312007
     */
    return donein;
}

private static decimal MakeRemainder(decimal multiplicationValue, decimal division)
{
    decimal z = multiplicationValue / division;
            z = multiplicationValue - z;
            return z;
}

编写CSS / less时使用：local和：global 。如果启用了CSS模块，它将默认为本地模式，您可以在以下选项中指定模式：

      // exclude all global styles for css modules
      {
        test: /\.(less|css)$/,
        exclude: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]'
                }
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      // process global styles without css modules
     {
        test: /\.(less|css)$/,
        include: path.resolve(__dirname, './src/styles'),
        use: [
          {
            loader: CssExtractPlugin.loader,
            options: { hot: is_dev, reloadAll: is_dev }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      }

如果您将模式定义为全局模式，那么所有包含的css类都不会被哈希名称代替，而是仅将您指定为：local的那些命名为唯一名称。例如：

          {
            loader: "css-loader",
            options: { 
                modules: { 
                    localIdentName: '[local]___[hash:base64:5]', 
                    mode: 'global',
                }
            }
          },

定义一个函数，该函数使用 getLocalIdent 选项完成检查文件以确定其是css模块还是全局文件的功能。这是我当前在设置中使用的方法。这也要求您的文件具有某种命名约定，css模块为 [name] .module.less ，常规文件为[name] .less。请参见下面的示例：

/* this will remain as is */
.header {
   color: blue;
}

:local {
  /* this will become something like item_xSH2sa */
  .item {
   color: yellow;
  }
}

Answer 6

解决方案1：

从reactapp的起点导入全局样式。
整个react应用都位于{strong> root 组件中的wrapped中。
它可以是index.js或app.js或index.html

解决方案2：

使用scss并创建main.scss文件，并在custom scss

中导入所有其他特别需要的main.scss文件

如何在反应应用中使用CSS模块应用全局样式？

6 个答案: