为react添加自定义css下拉树选择所有其他css mashup

Question

在我的项目中，我已经安装了下拉树选择，我想使用自定义的css为此。然而，如果我在我的webpack配置中添加一个新规则，插件工作正常，但是所有其他css都被混杂在一起了。

如果我删除该规则，那么所有其他css都可以正常工作，但是这个下拉树选择不能正常工作。

反应下拉树选择与国家标志，所以在这种情况下，我必须添加一些自定义css。

下面是我的webpack配置。那么你能告诉我我必须在我的webpack配置中添加/删除哪个规则吗？

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
        {
            loader: 'css-loader'
        }
        ]
    }),
    include: /node_modules[/\\]react-dropdown-tree-select/
    },

    // "postcss" loader applies autoprefixer to our CSS.
    // "css" loader resolves paths in CSS and adds assets as dependencies.
    // "style" loader turns CSS into JS modules that inject <style> tags.
    // In production, we use a plugin to extract that CSS to a file, but
    // in development "style" loader enables hot editing of CSS.
    {
    test: /\.css$/,
    use: [
        require.resolve('style-loader'),
        {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 1,
            modules:true,
            localIdentName:'[Name]__[local]__[has:base64:5]'
        },
        },
        {
        loader: require.resolve('postcss-loader'),
        options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
                browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
            }),
            ],
        },
        },
    ],
    }, 


    plugins: [
        new ExtractTextPlugin("styles.css"),

Answer 1

react-dropdown-tree-select的作者在这里。

为了在组件的css之上使用您自己的css，您需要在您的webpack中有两个规则-一个用于导入组件样式，另一个用于导入您的样式。

一般来说，这对于任何带有样式的react组件都是正确的。组件样式是预编译的，所以您需要告诉webpack不要对其运行任何进一步的处理。

{
    test: /.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader'
        }]
    }),
    include: /node_modules[/\]react-dropdown-tree-select/
}, {
    test: /.css$/,
    // rest of your rule goes here
    include: ['src']  // or 'lib' or whatever folder your styles reside in
}

第一个规则通过这个条件include: /node_modules[/\]react-dropdown-tree-select/匹配组件css，因为我们不需要对它运行任何后期处理，所以我们只需通过css-loader包含它。

第二个规则通过include: ['src']条件匹配源代码中的样式，并允许您应用您希望运行的任何加载器。

看一下你的操作，我认为你遗漏了第二条规则中的include，因此，它也适用于节点模块。试着过滤它，让我知道这是否解决了你的问题。

最后，我将这个CodeSandbox留在这里，它展示了如何在这里包含带有国家标志的自定义css，以防您已经看过它或将来可能需要类似内容的读者。

Answer 2

一个没有webpack的解决方案。只有scss。玩颜色游戏。

​

import DropdownTreeSelect from "react-dropdown-tree-select";
import "./data.scss";
import data from "./data.json";

......

onChange = (currentNode, selectedNodes) => {
  console.log("path::", currentNode.path);
};

assignObjectPaths = (obj, stack) => {
  Object.keys(obj).forEach(k => {
    const node = obj[k];
    if (typeof node === "object") {
      node.path = stack ? `${stack}.${k}` : k;
      this.assignObjectPaths(node, node.path);
    }
  });
};

render() {
  this.assignObjectPaths(data);
  return ( 
   <div>
    <DropdownTreeSelect 
      data = { data }
      clearSearchOnChange = {true}
      placeholderText = "Select"
      showPartiallySelected = { true }
      onChange = { this.onChange }
      className = "mdl-demo" 
    />
   </div>
  );
}

/**

div.react-dropdown-tree-select
  div.dropdown
    a.dropdown-trigger
      span
    ul.tag-list
      li.tag-item
        input
    div.dropdown-content
      ul.root
        li.node.tree
          i.toggle.collapsed
          label
            input.checkbox-item
              span.node-label
*/


/* fallback, until https://github.com/CompuIves/codesandbox-client/issues/174 is resolved */

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.mdl-demo {
  .dropdown-trigger>span:after {
    font-size: 12px;
    color: gold;
  }
  .toggle {
    font: normal normal normal 18px/1 "Material Icons";
    color: blue;
    white-space: pre;
    margin-right: 4px;
    cursor: pointer;
  }
  .toggle:after {
    content: "";
  }
  .toggle.collapsed::after {
    cursor: pointer;
    content: "\E5CF";
    vertical-align: middle;
    float: right;
  }
  .toggle.expanded::after {
    cursor: pointer;
    content: "\E5CE";
    vertical-align: middle;
    float: right;
  }
  /* checkbox styles */
  .checkbox-item {
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    vertical-align: middle;
  }
  .checkbox-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 2px solid lawngreen;
    transition: all 0.3s ease-in-out;
  }
  .checkbox-item:checked:before {
    height: 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-top-style: none;
    border-right-style: none;
    border-color: #2196f3;
  }
  .tag {
    background-color: red;
    border: 1px solid red;
    padding: 2px 0 2px 2px;
    border-radius: 2px;
    display: inline-block;
  }
  .tag-remove {
    color: blue;
    font-size: 75%;
    line-height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
  }
  .tag-remove.readOnly {
    cursor: not-allowed;
  }
  .node>label {
    cursor: pointer;
    margin-left: 2px;
  }
  .tag-list {
    display: inline;
    padding: 0;
    margin: 0;
  }
  .tag-item {
    display: inline-block;
    margin: 4px;
  }
  .tag-item .search {
    border: none;
    border-bottom: 1px solid green;
    outline: none;
  }
  .tag-item:last-child {
    margin-right: 4px;
  }
  .node {
    list-style: none;
    white-space: nowrap;
    padding: 4px;
  }
  .node.leaf.collapsed {
    display: none;
  }
  .node.disabled>* {
    color: lightseagreen;
    cursor: not-allowed;
  }
  .node.match-in-children.hide .node-label {
    opacity: 0.5;
  }
  .searchModeOn .toggle {
    // display: none;
  }
  .checkbox-item.simple-select {
    // display: none;
  }
  .hide:not(.match-in-children) {
    //display: none;
  }
  .dropdown {
    position: relative;
    display: table;
  }
  .dropdown .dropdown-trigger {
    padding: 4px;
    line-height: 20px;
    max-height: 200px;
    display: inline-block;
    overflow: auto;
    border: 3px solid brown;
  }
  .dropdown .dropdown-trigger.arrow {
    cursor: pointer;
  }
  .dropdown .dropdown-trigger.arrow.bottom:after {
    content: "\25BC";
    vertical-align: middle;
    color: pink;
    margin-right: 2px;
  }
  .dropdown .dropdown-trigger.arrow.top:after {
    content: "\25B2";
    vertical-align: middle;
    color: limegreen;
    margin-right: 2px;
  }
  .dropdown .dropdown-trigger.arrow.disabled {
    cursor: not-allowed;
  }
  .dropdown .dropdown-trigger.arrow.disabled.bottom:after {
    color: orangered;
  }
  .dropdown .dropdown-content {
    position: absolute;
    padding: 4px;
    z-index: 1;
    background: lightskyblue;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
  }
  .dropdown .dropdown-content ul {
    margin: 0;
    padding: 0;
  }
}

.special {
  color: green;
  background: pink;
}

<!--
demo data.json

[
    {
      "label": "VP Accounting",
      "tagClassName": "special",
      "children": [
        {
          "label": "iWay",
          "children": [
            {
              "label": "Universidad de Especialidades del Espíritu Santo"
            },
            {
              "label": "Marmara University"
            },
            {
              "label": "Baghdad College of Pharmacy"
            }
          ]
        },
      ]
    }
  ]
-->

​