Reputation: 645
<Alert/>
constructed with the code below is not visible:
import { Alert } from 'react-bootstrap';
import React from 'react';
const AlertHelloWorld = () => (
<Alert variant="success">
Hello World!
</Alert>
);
export default AlertHelloWorld;
The code results in opacity
set to 0
:
When I change opacity
to 1
in the browser the alert becomes visible.
All dependencies:
"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"
},
What is the proper way to make the alert visible?
Upvotes: 0
Views: 690
Reputation: 645
The problem is caused by someone's introduction of a custom bootstrap.custom.css
with a CSS code that causes opacity
for the Alert
component to be set to 0
:
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
Upvotes: 0
Reputation: 329
I have just checked your code on my end and it seems to be working fine for me using the following dependencies:
"bootstrap": "^4.4.1",
"react-bootstrap": "1.0.0-beta.16",
"react": "^16.9.0",
I can't think of a different reason why your code should not work.
Upvotes: 1