[英]Bootstrap + react-bootstrap form elements, styling not applied
I'm using bootstrap + react-bootstrap, and I don't really understand why my custom theming isn't applied on form elements.我正在使用 bootstrap + react-bootstrap,我真的不明白为什么我的自定义主题不适用于表单元素。
The theming is correctly applied to my button that has btn-primary style, and I assumed it would be the same on other bootstrap elements?主题已正确应用于具有 btn-primary 样式的按钮,并且我认为它在其他引导元素上会相同?
Here you can see that the elements still have the default bootstrap style vs the button: https://imgur.com/a/0kJZdjt在这里您可以看到元素仍然具有默认引导样式与按钮: https://imgur.com/a/0kJZdjt
My index.scss (app base generated with create-react app): https://pastebin.com/5nrWickD我的 index.scss(使用 create-react 应用程序生成的应用程序库): https://pastebin.com/5nrWickD
$theme-colors: (
primary: #86CB92,
secondary: #404E7C,
success: #71B48D,
info: #251F47,
warning: #251F47,
danger: #E87461,
light: #D8B4E2,
dark: #260F26
);
@import "~bootstrap/scss/bootstrap";
My JSX: https://pastebin.com/jvp9cwyz我的 JSX: https://pastebin.com/jvp9cwyz
<Form.Check type={'switch'}
className={'form-switch'}
disabled={!v.state.reachable}
defaultChecked={v.state.on}
onChange={({ target }) => {
lightArray[idx].state.on = target.checked;
setLightArray([...lightArray]);
turnLightOnOrOff(idx + 1, target.checked);
}
}/>
Is there something I am missing?有什么我想念的吗? Do I have to add classes to the form elements?我必须向表单元素添加类吗? I have looked around but can't find anything我环顾四周,但找不到任何东西
Well, turns out it's not as easy as just setting the theme-colors
variable.好吧,事实证明这并不像设置theme-colors
变量那么容易。
I had to set other variables as well, like this我还必须设置其他变量,就像这样
$theme-colors: (
"primary": #86CB92,
"secondary": #8f0000,
"success": #71B48D,
"info": #251F47,
"warning": #251F47,
"danger": #E87461,
"light": #D8B4E2,
"dark": #000000
);
$primary: map-get($theme-colors, primary);
$input-focus-border-color: $primary;
@import "~bootstrap/scss/bootstrap";
And now the form element have the right styles.现在表单元素有正确的styles。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.