导入语义-ui css，而不对类进行本地范围的限定范围-ui使用本地范围的类

Question

我希望在组件中有选择地使用semantic-ui-css类。问题是，我使用PostCSS模块选项，它在本地对特定组件的所有类名进行范围设置。当我使用semantic-ui-react组件(例如按钮)时，它使用类ui button呈现元素button，但是所包含的css在本地得到作用域，因此，而不是button，我得到了button-min_ui__14RRq。

我需要做两件事之一：

1. 导入语义-ui css，而不对类进行本地范围限定。
2. 使语义-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

有没有一种在不保留默认类的情况下这样做的方法？

Answer 1

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

劳拉

Answer 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

Answer 3

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

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

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

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