ModalダイアログにカスタムCSSを適用するにはどうすればいいですか - React-bootstrap

Question

私はここで気に入っています。私はModalダイアログにCSSを適用しようとしています。

私はCSSファイルを作成しました：ルートレベル

/css/mycss.css

.test { 
    width: 90%; 
    color: red; 
} 

/css/mycss.css、私は私のモーダルダイアログJSXファイルを持っています：

MyModal.jsx

//more code above 
<Modal 
    {...this.props} 
    show={this.state.show} 
    onHide={this.hideModal} 
    dialogClassName="test" 
> 
//more code below 

私が理解しているように、私はdialogClassName小道具を使ってCSSをモーダルダイアログに適用することになっています。私は私のCSSファイルのクラスセレクタにアクセスしようとしていると、図のように小道具に渡そうとしています。

CSSをインポートする必要がありますか？

import test from '/css/mycss.css'; 

これは機能しませんでした。 CSSを表示するにはどうすればよいですか？

編集：

私はそれの

import styles from './css/mycss.css'; // dialogClassName='styles.test'; 
import { test } from './css/mycss.css'; // dialogClassName='test'; 
import .test from './css/mycss.css'; // dialogClassName='test'; 
import {.test} from './css/mycss.css'; // dialogClassName='.test'; 
import './css/mycss.css'; // dialogClassName='test'; 

なしCSSを適用しません試みました。

編集2：

私は再びimport styles from './css/mycss.css'を試してみましたが、その後、dialogClassName = {styles.test};をしました。それは実際に働いた...しかし、一種。テキストの色は赤色に変わりましたが、モーダルダイアログの幅はまだまだかなり停滞しています。 width属性を何に変更しても、画面の90％または画面の10％ではありません。だから最初に、チュートリアルはなぜ私はdialogClassNameに文字列を渡すように私に従っていたのですか？そして、モーダルダイアログの幅を変更するにはどうしたらいいですか？

Answer 1

あなたはwebpackを使用していると言いました。 css loaderがインストールされていない場合。

npm install css-loader --save-dev 

これで、部分的なCSSファイルをReactコンポーネントにインポートできます。この例は、CSSファイルがjsファイルと同じ方向にある場合です。

import componentStyle from './componentStyle.scss'; 

さらに多くの方法でcssファイルをインポートできます。これは、あなたがこのようなファイルの中に入ることができるので私が使用します：className={componentStyle.classInside}。

WebPACKの例：

module.exports = { 
    module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
    } 
}; 

また、あなたは同じようになどSASS、LESSを使用することができます。

Answer 2

はimport './css/mycss.css';

パスがファイルへの相対でなければなりません試してみてください。