0

semantic-ui-cssコンポーネントでクラスを選択的に使用したいと考えています。問題は、特定のコンポーネントのすべてのクラス名をローカルにスコープする PostCSS モジュール オプションを使用していることです。ボタンなどのコンポーネントを使用するsemantic-ui-reactと、要素buttonが classesでレンダリングされますui buttonが、含まれている css はローカルにスコープされるため、button取得する代わりにbutton-min_ui__14RRq

次の2つのいずれかを行う必要があります。

  1. クラスをローカルにスコープせずに Semantic-ui css をインポートする
  2. Semantic-ui コンポーネントを作成して、ローカルにスコープされているクラスを使用する

今のところ、選択肢は 1 つだけです。

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