【问题标题】：Antd and React Suite Sliders show up "invisible", but are still thereAntd 和 React Suite Sliders 显示“不可见”，但仍然存在
【发布时间】：2021-03-08 19:56:54
【问题描述】：

目标

我只想在组件中的色轮下方显示一个滑块，但滑块只显示了一部分。我正在为滑块使用 Antd React.js 包，并且在 React Suite 包中也遇到了同样的问题。这让我相信我处理这个问题的方式存在根本性的错误。 请注意我在 .NET Core 框架 (5.0) 上使用 React.js。

Ant 设计实例

我正在尝试按照 Ant Design 滑块页面中显示的示例进行操作。

我的实现

我的渲染代码如下：

  render() {
      return (
    <div>   
        <ColorPicker onInput={hue => console.log("Selected Hue: " + hue)} />         
        <Slider defaultValue={50} tooltipVisible />  
        <button className="btn btn-primary" onClick={this.turnOnLight}>Turn on Light</button>
    </div>
    );
  }

输出

以下图片显示了我在页面呈现时看到的内容。

此外，当我突出显示滑块应位于的区域时，我可以看到它并更改工具提示上显示的值。

问题

我怀疑这是一个 CSS 样式问题，因为该栏确实出现了。但这很奇怪。 React Suite 库也发生了同样的情况……所以我不确定我哪里出了问题。任何资源或指导将不胜感激！另外，如果需要发布任何其他代码，请告诉我。谢谢！

【问题讨论】：

标签： javascript reactjs .net-core

【解决方案1】：

我在点击发布按钮时找到了答案。我没有包括 Ant design 或 React Suite 提供的 .css 样式表。在我的导入中，我只有

import { Slider } from 'antd';

当我应该也添加css导入时，如下

import { Slider } from 'antd';
import 'antd/dist/antd.css';

张贴以供将来参考。

【讨论】：