如何将自定义 CSS 应用于模态对话框 - React-bootstrap

Question

我是 React 的新手，我正在尝试将 CSS 应用于模态对话框。

我创建了一个 css 文件：/css/mycss.css

/css/mycss.css

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

在根级别，我有我的模式对话框 JSX 文件：

MyModal.jsx

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

据我了解，我应该使用 dialogClassName 属性将 CSS 应用于模态对话框。我正在尝试访问我的 CSS 文件中的 class 选择器并将其传递到道具中，如图所示。

我是否必须导入 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';

None 其中应用 CSS.

编辑 2：

我又试了一次 import styles from './css/mycss.css'，然后 dialogClassName = {styles.test};。这确实有效……但有点。文本颜色确实变为红色，但模态对话框的宽度仍然停滞不前。无论我将 width 属性更改为什么，它都不是屏幕的 90% 或屏幕的 10%。那么首先，为什么我遵循的教程告诉我将字符串传递给 dialogClassName？以及如何更改模态对话框的宽度？

Answer 1

尝试import './css/mycss.css';

路径应该是相对于文件的路径。

Answer 2

你说你用的是webpack。如果你还没有安装 css loader.

npm install css-loader --save-dev

现在您可以在 React 组件中导入部分 CSS 文件。这个例子是当你有 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 3

在 .js 文件中

import classes from './style.css';
dialogClassName= {classes.myModalStyle} as Modal attribute

在style.css

.myModalStyle{
    width: 90%,
    max-width: none!important;
}

注意：max-width: none!important是最重要的部分。没有它，调整宽度将不起作用

如何将自定义 CSS 应用于模态对话框 - React-bootstrap

How do I apply custom CSS to Modal dialog - React-bootstrap

reactjs

react-bootstrap