semantic-ui-css
コンポーネントでクラスを選択的に使用したいと考えています。問題は、特定のコンポーネントのすべてのクラス名をローカルにスコープする PostCSS モジュール オプションを使用していることです。ボタンなどのコンポーネントを使用するsemantic-ui-react
と、要素button
が classesでレンダリングされますui button
が、含まれている css はローカルにスコープされるため、button
取得する代わりにbutton-min_ui__14RRq
次の2つのいずれかを行う必要があります。
- クラスをローカルにスコープせずに Semantic-ui css をインポートする
- 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
デフォルトのクラスを維持せずにこれを行う方法はありますか?