我试图添加一个进度条用作审查,这真的很奇怪,因为什么都没有显示。
我试着从react-bootstrap复制/粘贴一些例子,但是完全不起作用。我也试了一下material-ui,但是还是一样的...
我不明白为什么,我没有用它作为一个奇怪的方式。
<Col>
<Row className="review-summary">
<p> 5 </p>
<ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
</Row>
<Row className="review-summary">
<p> 4 </p>
<ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
</Row>
<Row className="review-summary">
<p> 3 </p>
<ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
</Row>
<Row className="review-summary">
<p> 2 </p>
<ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
</Row>
<Row className="review-summary">
<p> 1 </p>
<ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
</Row>
</Col>
CSS是:
.review-summary {
display: inline-flex;
}
.review-summary p {
font-family: Source Sans Pro;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.6;
letter-spacing: normal;
text-align: left;
color: #ff7255;
}
.review-summary-progress {
color: #ff7255;
}
知道为什么什么都不显示吗?我也试着把进度条移到其他地方,但是同样的事情...
4条答案
按热度按时间u59ebvdq1#
对我来说,这是我的组件中缺少的导入。请尝试在导入中添加以下内容:
igsr9ssn2#
我遇到了同样的问题,把进度条组件放在一个列里面是我解决这个问题的方法。
所以它不是这样工作的:
但它是这样工作的:
3npbholx3#
尝试更新依赖项。请使用
npm
或yarn
。另一种调试方法是设置
now
值,该值是显示当前进度条的数字,例如now={50}
:More details.
xdnvmnnf4#
这为我解决了这个问题,
请确保已安装引导CDN,确保数字和内嵌样式带有{}和{{}},确保“”仅位于键上,而不在内嵌样式的值上
下面是适用于我的代码: