Question

目前，如果我不使用未使用的className，则会自动将其从组件中删除，并使用CSS“填充”它们。我正在开发可在国外网站上使用的小部件，并希望使用户能够在其网站上编写自定义CSS来实现小部件。在某些地方，className应该基于ID（例如className={'question-'+question_id}。

我不知道我的webpack的哪一部分负责删除类。我如何禁用它或更好：我如何告诉webpack不要删除此特殊类？

const path = require('path');
const loaderUtils = require('loader-utils');

const HtmlWebPackPlugin = require("html-webpack-plugin");
const DotenvPlugin = require('webpack-dotenv-plugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inject: "head"
});

const dotEnvPlugin = new DotenvPlugin({
  sample: './.env.default',
  path: './.env'
});

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {
  .....
};

module.exports = {
  output: {
    library: 'XLVNT',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: 'x.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          },
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          } ,
          "sass-loader"
        ]
      },
      {
          test: /\.(pdf|jpg|png|gif|svg|ico)$/,
          use: [
              {
                  loader: 'url-loader'
              },
          ]
      },
    ]
  },
  plugins: [dotEnvPlugin, htmlWebpackPlugin]
};

Answer 1

如果您希望某人使用您的组件或组件库，则应该更多地在“ props”中考虑，而不是在CSS类中进行样式自定义。

如果您需要窗口小部件的用户能够完全操纵组件的样式，则可以有很多选择，而不必在所有元素上预先编写className。

我发现的最常见的方法是使您的组件接收属性altClass或className，然后在组件包装器中使用它。这样，用户可以分配一个类来自己控制样式。

该属性甚至可以是一个对象，其中包含一堆css键/值，您可以以相同的方式将其应用于组件中的多个元素。

我希望这能回答您的问题。

如果您想获得启发，则应检查Material UI或Ant Design之类的开源UI库，它们很好地处理了这种情况。

让React搁置一秒钟。假设您有一个函数接收两个参数：id和className。 id 来自用户页面上的元素 className是与将用于自定义事物的类相对应的字符串。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'colorme.js',
    library: 'colorme'
  }
};

index.js

export function addThings(id, className) {
  document.getElementById(id)
    .innerHTML = (
      '<div class="'+ className +'">Testing things</div>'
    )
}

此函数addThings将在id的元素中插入具有可配置className的div。

然后，在您的用户页面中：

<html>
  <head>
    <style>
      .asd {
        background-color: red;
      }
      .awd {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript" src="./colorme.js"></script>
    <script>
      window.colorme.addThings('test', 'asd')
      // window.colorme.addThings('test', 'awd')
      // ...
    </script>
  </body>
</html>

您将看到添加了“测试事物” div，分别具有类“ asd”或“ awd”。现在，您的用户可以控制该div的外观。

如果这对您有用，请在此处阅读更多信息：https://webpack.js.org/guides/author-libraries/

如果传递选项很重要，则可以使用data- *属性，如下所示：

<style>
  .asd {
    background-color: red;
  }
  .awd {
     background-color: blue;
  }
</style>
<div data-root_class="asd" data-some_other_class="lala" id="test"></div>
<script type="text/javascript" src="./colorme.js"></script>
<script> colorme.init('test') </script>

Answer 2

这里看起来有点不对劲的第一件事是类名串联。请使用es6字符串文字。如下所示：

className={`question-.${question_id}`}

除此之外，您是否可以尝试使用https://github.com/JedWatson/classnames中的classnames

请告诉我这是否有帮助。

添加空的未使用的类名称以响应组件

2 个答案: