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文件中的类选择器并将其传递给prop，如图所示。

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

现在您可以在React组件中导入部分CSS文件。这个例子是当你有一个与js文件方向相同的CSS文件时。

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';

路径应该与文件相关。

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

3 个答案: