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

 @model Paragraph

 @{
 ViewBag.Title = "Chapter One";
 }

<h2>Chapter One</h2>

<p>@Model.paraOne</p>
<p>@Model.paraTwo</p>
<p>@Model.paraThree</p>
<p>@Model.paraFour</p>

React-bootstrap类样式不适用

2 个答案: