0

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

我需要做两件事之一：

  1. 导入 Semantic-ui css，而类不在本地范围内
  2. 使 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

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

4

3 回答 3

1

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

劳拉

于 2018-09-06T12:48:58.303 回答
0

我总是使用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'))
于 2020-03-04T17:07:25.440 回答
0

你和我有类似的问题。

使外部库（语义 ui React）和 CSS 模块与 webpack css-loader 一起工作

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

看看这个在 Webpack 中使用带有 CSS 模块的语义 UI

于 2019-07-30T08:55:37.110 回答