<Alert/>, созданный с кодом ниже, не виден:

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

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

export default AlertHelloWorld;

В результате выполнения кода opacity устанавливается 0:

enter image description here

Когда я изменяю 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"
  },

Как правильно сделать оповещение видимым?

0
OSGI Java 20 Фев 2020 в 18:37

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;
}
0
OSGI Java 21 Фев 2020 в 13:20

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

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

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

1
Jan Havel 20 Фев 2020 в 16:06