リアクションツールボックスの要素をclassNameでスタイリングする

Question

テーマを使用せずにコンポーネントのスタイリングに関していくつか問題があるようです。私は要素ごとに新しいテーマを作成する必要なしに、色を変更したいだけです。

この場合、私は茶色がかった色にバーの色を変更したいと次のように今、私は入力クラスを持っている：

import style from './style.scss' 
const TextInput = (props) => { 
    <Input className={style.textInput} {...props} /> 
} 

そして、私のstyle.scssファイル内：

.textInput { 
    .bar { 
    background-color: #663300; 
    } 
} 

ご協力いただければ幸いです。

Answer 1

ClassNameはそのようには機能しません。 CssスタイルをclassNameに渡すことはできません。間違っています。

どちらかあなたは（あなたのケースで、私はそれがクラス名=「にtextInputバー」だろうと思います）の文字列として適用したいクラス名を渡すか、classNames libraryでクラス名を作成することができます（どのような場合には、最終的な結果はとなります文字列）。

コンポーネントがレンダリングするページにスタイルが含まれていることを確認し、反応がスマートになり、各コンポーネントの正しいCSSクラスがレンダリングされます。

あなたがin hereクラス名を確認することができますように私は理解していないstring