使用reactstrap

Question

我正在尝试使用reactstrap显示工具提示。工具提示正确显示，但没有淡入/淡出过渡。使用检查器，我注意到类fade没有应用到工具提示<div>：

我按照https://www.npmjs.com/package/reactstrap#adding-bootstrap上的安装说明，使用package.json将这些依赖项添加到我的yarn中：

"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
"react-popper": "^1.3.2",
"react-transition-group": "^2.5.3",
"reactstrap": "^7.1.0",

这是从我的应用程序中获取的工具提示用法的示例组件：

import React from 'react';
import nanoid from 'nanoid';
import {UncontrolledTooltip} from 'reactstrap';

export default class ExampleTooltip extends React.PureComponent {
    constructor(props) {
        super(props);
        this._id = `autogeneratedid-${nanoid()}`;
    }

    render() {
        return (
                <>
                    <span id={this._id}>Hover me!</span>
                    <UncontrolledTooltip target={this._id}>
                        My tooltip
                    </UncontrolledTooltip>
                </>
            );
    }
}

我在index.js文件中包含使用SASS的引导程序：

import '../styles/style.scss';

在我的style.scss中：

@import 'bootstrap/scss/bootstrap.scss';

我想念什么吗？

我在https://codesandbox.io/s/01zm5k5w10上创建了一个codeandbox

谢谢。

Answer 1

问题似乎不在CSS / SASS上-它不是您缺少或不包含的某个类-但它在您的react / js中，因为它没有将“ fade show”类应用于包装div就像在docs网站上一样。

编辑-看起来他们的代码有问题-除了文档站点外，所有其他reactstrap的真实示例-都具有淡入淡出的问题-例如your sandbox，很多示例我无法在此处粘贴更多内容的codepen。

当您在GitHub中寻找此问题时，您会看到关于some Discussions的信息-我认为库中有内容，而代码中则没有内容。

Answer 2

您检查过devtool中的styles.css吗？ 检查=>来源