我正在使用 bootstrap.build 自定义 Bootstrap 5 .到目前为止,我没有任何问题。
但是,当我切换到 react 元素时,事情就出错了。按钮内的文本变为黑色。悬停时,大纲按钮也是如此。
我所做的只是自定义 .scss
像这样的文件:
$orange: #e84c22;
$primary: $orange;
@import "~bootstrap/scss/bootstrap.scss";
怎么了?我的目标是用确切的
#e84c22
更改这些按钮仅使用 btn btn-outline-primary
显示白色文本的颜色和 btn btn-primary
类(class)。我试过改变
$yiq-contrasted-threshold
至200
但它不会改变任何东西。那么,Bootstrap in react 和 bootstrap.build 有什么区别呢?背后发生了什么?
这是codesanbox.io中的示例元素。请检查它并告诉我我做错了什么。
最佳答案
从查源来看,bootstrap.build/app使用的是Bootstrap 4,而不是Bootstrap 5。颜色对比逻辑从Bootstrap 4变成了Bootstrap 5,颜色对比阈值差别很大。
Bootstrap 4 使用了 YIQ 颜色空间...
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
Bootstrap 5 使用 WCAG 2.0 algorithm// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;
比较两个版本和颜色逻辑:Using the 4.x color contrast logic to change $primary to #e84c22 - 结果 灯 文字颜色
Using the 5.x color contrast logic to change $primary to #e84c22 - 结果 黑暗 文字颜色
因此,您的 Bootstrap 5 React SASS 自定义按预期工作,并且 bootstrap.build 仍在使用较旧的 4.x。
要在 Bootstrap 5(使用 React)中获得浅色文本颜色,您可以更改
$min-contrast-ratio
的默认值多变的...例如,将 $min-contrast-ratio 从 4.5 更改为 3 会使文本颜色与
#e84c22
形成鲜明对比。 :$min-contrast-ratio: 3;
$orange: #e84c22;
$primary: $orange;
@import "~bootstrap/scss/bootstrap.scss";
https://codeply.com/p/Z1tOoBclnH如 Bootstrap 5 SASS 中所述,“WCAG 2.0 的可接受值为 3、4.5 和 7”。或者,您可以使用我的 related answer 中描述的 5.x 解决方案。 .如果您希望进一步自定义 Bootstrap,themestr.app (注意:我是创建者)已使用 Bootstrap 5.x 进行了更新。
关于css - 自定义按钮中的 bootstrap 5 文本颜色对比度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68298372/