时间戳

首页 > 解决方案 > Reac-Bootstrap如何覆盖表单输入背景

css - Reac-Bootstrap如何覆盖表单输入背景

问题描述

我有一个next.js应用程序并且正在使用react-bootstrap. 我正在尝试从#e8f0fe or rgb(232, 240, 254)引导程序用于输入白色的蓝灰色 ( ) 覆盖我的默认表单背景。

我目前正在通过custom.bootstrap.scss文件自定义引导变量

$theme-colors: (
   'primary': #e28215,
   'secondary': #83b8f3,
   'tertiary': #1575e2,
   'headings': #2b363f,
   'body': #5b6b79,
   'inputBorderNormal': #c3ced6,
   'inputBorderFocus': #90a3b0,
   'darkBG': #2b363f,
   'lightBG': #eef0f3,
   'input-bg': #fff,
   'input-bg-disabled': #fff,
);

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

然后将此文件导入我的index.scss：

@import './custom.bootstrap.scss'

然后index.scss我_app.js像这样使用：

import '../style/index.scss';

主题似乎可以工作，因为我的主按钮是橙色的，但我无法更改表单背景（我什至无法在元素级别上用 覆盖它!important）

请在这里找到一个回购

任何帮助表示赞赏。

干杯

标签： cssbootstrap-4sassnext.jsreact-bootstrap

解决方案

我制作了一个代码沙箱来演示这个 https://codesandbox.io/s/sparkling-feather-ppg8q?file=/style/custom.bootstrap.scss

有两个变化：

1.而不是将自定义引导文件导入index.scss导入_app.js

import "../style/custom.bootstrap.scss";

  1. 将变量直接声明到文件中并应用它们。

$darkBG: #2b363f;
$primary:#e28215;
$tertiary:  #1575e2;

// ... Rest of your colors..

@import '~bootstrap/scss/bootstrap';

body {
    padding: 20px 20px 60px;
    margin: 0;
    background-color: $primary;
  }

form {
    background-color:$darkBG;
}
.my-3 {
 background-color:$tertiary;
}

推荐阅读