Как сделать компонент React Bootstrap Alert видимым?

Question

<Alert/> построенный с кодом ниже не виден:

import { Alert } from 'react-bootstrap';
import React from 'react';

const AlertHelloWorld = () => (
    <Alert variant="success">
        Hello World!
    </Alert>
);

export default AlertHelloWorld;

Код приводит к opacity, установленному в 0:

Когда я изменяю opacity на 1 в браузере, предупреждение становится видимым.

Все зависимости:

  "dependencies": {
    "@babel/plugin-transform-runtime": "7.4.3",
    "@babel/runtime": "7.4.3",
    "babel-polyfill": "6.26.0",
    "base-64": "0.1.0",
    "bootstrap": "^4.4.1",
    "es6-promise": "4.2.5",
    "express": "4.16.4",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.4.1",
    "local-storage": "1.4.2",
    "markdown-to-jsx": "6.10.3",
    "node-sass": "4.13.1",
    "popper.js": "1.15.0",
    "prop-types": "15.6.2",
    "raf": "3.4.1",
    "react": "^16.9.0",
    "react-bootstrap": "1.0.0-beta.16",
    "react-dom": "16.8.0",
    "react-router-dom": "4.3.1",
    "request": "2.88.0",
    "request-promise": "4.2.2",
    "sass-loader": "7.2.0"
  },

Что такое правильный способ сделать предупреждение видимым?

Answer 1

Я только что проверил ваш код на моем конце, и он, кажется, работает нормально для меня, используя следующие зависимости:

"bootstrap": "^4.4.1",
"react-bootstrap": "1.0.0-beta.16",
"react": "^16.9.0",

Я не могу придумать другую причину, по которой ваш код не должен работать .

Answer 2

Проблема вызвана чьим-то введением пользовательского bootstrap.custom.css с кодом CSS, в результате чего opacity для компонента Alert устанавливается на 0:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}