Question

我想在组件中选择性地使用semantic-ui-css类。问题是我使用PostCSS modules选项，该选项在本地范围内特定组件的所有类名。当我使用semantic-ui-react组件（例如按钮）时，它将使用类button渲染元素ui button，但是所包含的css在本地范围内，因此我得到的是{{ 1}}

我需要做两件事之一：

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

现在我看到我只有一个选择：

button

我明确说明该按钮要使用的类。它可以工作，但是我必须对每个元素都这样做，并且它保留默认类。所以我得到button-min_ui__14RRq

有没有不保留默认类的方法？

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'))

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

3 个答案: