React-bootstrap 类样式不适用

Question

我通过导入 react-bootstrap 组件来使用 react-bootstrap，但由于某种原因，类样式并未应用于元素，即使我可以看到引导类被赋予了 DOM 中的相应元素。我使用自己的类进行定位，它不会覆盖任何东西。有谁知道可能出了什么问题？例如：

import React, { Component } from 'react'
import {Alert} from 'react-bootstrap'

class Error extends Component {
render() {
const {errorText} = this.props
return (
  <Alert bsStyle="warning" className="error-container">
    <div className="error-msg">{errorText}</div>
  </Alert>
);
}
}

Answer 1

您的代码没有应用样式，因为缺少 Bootstrap CSS 资源。 正如您所注意到的，Alert 组件正确地应用了类名。 最后，类名没有应用正确的样式，因为缺少 Bootstrap CSS 资源。

最小可行的解决方法是导入缩小的 Bootstrap CSS：

1.安装 Bootstrap 库 yarn install bootstrap

2。在第 1 步之后从 node_modules 文件夹中的 index.js 中添加缩小的引导 CSS

让我们也将您的 Alert 组件导入更改为仅导入 Alert 功能，而不是完整的 react-bootstrap 库。

这是您的实现示例，仅导入 Alert 组件：

index.js

--

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { Component } from 'react'
import Alert from 'react-bootstrap/Alert'

class Error extends Component {
  render() {
    const { errorText } = this.props;
    return (
        <Alert bsStyle="warning" className="error-container">
          <div className="error-msg">{errorText}</div>
        </Alert>
    );
  }
}

Answer 2

try it after adding this code to your webpack.config.js

      {
                 test: /(\.css|\.scss)$/,
                loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader?sourceMap'
            }