导入 Semantic-ui css，而类不在本地范围内 || Semantic-ui 使用在本地范围内的类答案

【问题标题】：Import Semantic-ui css without the classes being scoped locally || Semantic-ui to use classes that are being scoped locally导入 Semantic-ui css，而类不在本地范围内 || Semantic-ui 使用在本地范围内的类
【发布时间】：2020-03-05 01:07:25
【问题描述】：

我想在我的组件中选择性地使用semantic-ui-css 类。问题是我使用 PostCSS modules 选项，它在本地范围内特定组件的所有类名。当我使用semantic-ui-react 组件（例如按钮）时，它会使用类ui button 呈现元素button，但包含的css 会在本地范围内，所以我得到button 而不是button-min_ui__14RRq

我需要做以下两件事之一：

导入 Semantic-ui css，而类不在本地范围内
使 Semantic-ui 组件使用本地范围内的类

现在我发现我只有一个选择：

import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'

export default class Test extends React.Component {
  render(){
    return (
        <Button className={[semantic.ui, semantic.button]}>Click Here</Button>
      )
  }
}

我明确说明了按钮要使用的类。它有效，但我必须对每个元素都这样做，并且它保留默认类。所以我得到ui button button-min_ui__14RRq button-min_button__Uio9b

有没有办法在不保留默认类的情况下做到这一点？

【问题讨论】：

标签： reactjs postcss semantic-ui-react rollupjs semantic-ui-css

【解决方案1】：

我不确定我是否完全理解这个问题，但会试一试。您是否应该尝试从 PostCSS 中排除语义/全局样式？例如。如果您使用 webpack，请在加载程序定义中使用“排除”。（这是我们在我工作的一个项目中所做的事情）

劳拉

【讨论】：

【解决方案2】：

你和我有类似的问题。

Making External Library(Semantic ui React) and CSS module work with webpack css-loader

据我了解，您希望从 css 模块中排除语义 UI 反应库样式，以便它与您的应用程序一起使用。您可以为 css 加载器创建多个规则来解决此问题。

看看这个Using Semantic UI With CSS Modules in Webpack

【讨论】：

【解决方案3】：

我总是使用库的css 而不是他们提供的组件，我自己编写。

所以只安装semantic-ui-css。现在在您的反应应用程序中导入如下所示。

import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'

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

【讨论】：