为什么Bootstrap background和text类没有在react组件中进行更改？
在React组件中更改Bootstrap的background和text类可能会导致一些问题，原因如下：
- React的组件化思想：React鼓励使用组件化的开发方式，将UI拆分为独立的组件，每个组件负责自己的渲染和状态管理。这种组件化的思想与Bootstrap的样式类（如background和text类）的全局性质相冲突。直接在React组件中更改Bootstrap的样式类可能会导致样式的混乱和不可预测的结果。
- 样式的隔离性：React组件的样式应该具有隔离性，即组件的样式不应该影响其他组件。使用Bootstrap的样式类可能会破坏这种隔离性，导致样式的冲突和混乱。
- 样式的可维护性：在React中，推荐使用CSS模块化或CSS-in-JS等方式管理组件的样式。这种方式可以使样式与组件的逻辑紧密关联，提高样式的可维护性和可重用性。直接更改Bootstrap的样式类可能会破坏这种模块化的样式管理方式。
相反，推荐的做法是使用React的内联样式或CSS模块化等方式来定义和管理组件的样式。这样可以保持样式的隔离性和可维护性，同时也能更好地适应React组件化的开发方式。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（移动推送、移动分析等）：https://cloud.tencent.com/product/mobile
相关·内容
你能看一下这个演示吗，让我知道为什么我不能在react js中使用onClick来切换#root的.green类？
function toggler(e){
var x = document.getElementById("root");
x.classList.toggle('green');
}
const Button = ({ styleClass, onClick, text }) => {
return (
<button
type="button"
onC
浏览 0提问于2018-10-18得票数 0
4回答
我想在组件之间切换，以便在我的App.js文件中包含两个组件
LoginRegister
我有两个按钮来触发它们，但是它们没有改变，而是在单击按钮时得到了这个错误。
TypeError: _this.setState is not a function. (In '_this.setState({
screenwhich: false
})', '_this.setState' is undefined)
这是我的app.js文件
import { StatusBar } from 'expo-status-bar&#
浏览 6提问于2021-08-27得票数 0
1回答
我用React Bootstrap设计了我的网站。但我一直面临的问题，使它的反应。我正在附上截图和我的网站下面的代码。
在这里，着陆页面的高度比需要的高得多。
APP.JSX
import React from "react";
import MainNav from "./Navbar";
import Home from "./Home";
import About from "./About";
function App() {
return (
<div>
<MainNav
浏览 0提问于2020-02-13得票数 0
1回答
如何从类之外或从prop.SomeFunction ()进行状态更改？我结合使用打字本。是的，我已经上过课了：
班级：
import * as React from "react";
import { Label } from "../../components/label/label";
import { TextBox } from "../../components/textBox/textBox";
import IApp from "../../interfaces/global-interfaces";
import
浏览 1提问于2018-09-04得票数 0
2回答
从数组映射一个项目
、、、
我正在映射一个数组，使之具有链接，这将指示我修改表的一行
这是我的DepotList组件：
import React from 'react';
import { Link } from 'react-router-dom';
import Table from '../../../Common/Table';
import { textFilter } from 'react-bootstrap-table2-filter';
const DepotList = props => {
const { depots
浏览 6提问于2022-05-20得票数 0
我刚刚开始在全球范围内寻找不断变化的主题，发现可以做到这一点，
但我在实现react原生项目的示例代码时遇到了一个问题，
我尝试过以下代码：
//themeContext.js
const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const Theme
浏览 2提问于2019-04-01得票数 2
我是一个非常初级的开发人员，我正在用ReactJS做一个网站，我有一个引导导航栏设置为透明的页面顶部，当你滚动它的变化，有颜色。我希望当你点击“汉堡包”时，菜单项的背景颜色不是透明的。我有一个全屏图像，透明的导航栏位于顶部，菜单在没有背景color...Thanks帮助的情况下是看不见的。 JSX. import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import $ from "jquery"
import "bootst
浏览 13提问于2020-09-11得票数 0
1回答
样式内的伪类选择器.组件
、、、
我有点被一些很简单的东西堵住了。我试图在样式组件中添加一个伪类选择器。只是在悬停时给链接元素添加一些背景，但似乎他不认识伪类，因为里面的css没有应用，如果有人能帮我找出为什么不是，那就是拯救生命的哈哈
代码如下
import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { config } from "../../configFile";
import {
浏览 4提问于2022-03-30得票数 0
这里展示了如何设置属性showModel并将其赋予false
Main.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import UserDataModel from './UserDataModel';
class Main extend
浏览 1提问于2021-08-14得票数 0
回答已采纳
1回答
我通过做React来学习，我认为React中的render方法是有义务的，但是我看到了以下组件：
export const GoogleButton = withStyles(theme => ({
root: {
height: 55,
width: 255,
margin: theme.spacing(5, 0, 2),
padding: theme.spacing(0, 1),
justifyContent: 'start',
background: theme.palette.background.default
浏览 3提问于2020-04-09得票数 0
回答已采纳
我在这里尝试用ReactJS中的组件来创建PopUps，但是我在Reactid-withaddons.js中得到了这个错误：
错误:不变冲突：_registerComponent(.)：目标容器不是DOM元素。
这是我的密码：
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="react-0.13.3/build/react-wit
浏览 1提问于2015-06-22得票数 5
我在我的项目中使用react-bootstrap，我想定制一个组件，官方文档给出了一个如何做到这一点的例子：
<>
<style type="text/css">
{`
.btn-flat {
background-color: purple;
color: white;
}
.btn-xxl {
padding: 1rem 1.5rem;
font-size: 1.5rem;
}
`}
</style>
<Button va
浏览 0提问于2020-05-08得票数 0
2回答
我正在构建一个使用gatsby/react/react-bootstrap/framer-motion的网站。我有一个框架运动覆盖我的反应引导css的问题？我不想把所有的响应性都重新定义到这些元素中，我想知道有没有办法让这两个库彼此配合得很好？？这似乎是一个令人头疼的试图使帧运动响应…我可能只是设计不同的视口，但idk。 下面是我的代码： import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';
import
浏览 21提问于2020-08-30得票数 1
我在寻找如何改变它，但似乎没有一个解决方案对我有效。
我想覆盖react-bootstrap按钮的颜色。
下面这个解决方案运行得很好，也正是我想要做的：
<Button
block
style={{backgroundColor: '#0B0C10', borderColor: '#45A293', color: '#45A293', borderRadius: '100px'}}
>
sample text
</Button>
但我不想每次使用按钮时都重写它，所以我想用css解决方案，我
浏览 0提问于2019-03-21得票数 2
我正在使用Visual 2022中的React应用程序模板来创建一个web项目。
在项目创建之后，我就安装了一个用钩子实现的组件，例如用包管理命令
npm install react-bootstrap bootstrap@5.1.3
然后我把它导入home.js -
import Button from 'react-bootstrap/Button';
加上一个元素-
<div>
<Button variant="primary">Button #1</Button>
<Button variant="
浏览 5提问于2022-03-01得票数 -2
1回答
嗨，我正在尝试设置一个基本的react示例，这是我用来显示页面的代码。你能推荐我怎样把这个元素写得更好吗？我要导入到应用程序中的Header.js有什么问题？
Header.js
import Jumbotron from "react-bootstrap/Jumbotron";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";
export default class Header extend
浏览 9提问于2019-11-08得票数 0
回答已采纳
1回答
我目前正在做一个学习项目，让自己熟悉React。这个应用程序是一个测验应用程序，最终目标是让用户根据他给出的答案得到一个运动推荐。共有8个问题，每个问题代表一个属性。在应用程序上，每个问题下面都有一个滑块，用户可以在1到5之间更改作为问题的答案。 我希望在问题下面有一个类似于运动员个人资料的东西，那将是一个条形图，每一列是一个属性，列的值等于答案。 这是我的组件，它用滑块显示问题： import React, { Component } from 'react';
import { Slider } from '@material-ui/core';
impo
浏览 28提问于2020-04-04得票数 0
我想用FaPlus图标制作按钮，以呈现表单OnClick (或者OnPress，我也看到了)，但我不知道它在比较中是否有任何区别)，但是function说“a adirCurso”(箭头函数)没有定义，有什么想法吗？(我使用了与此类似的另一个问题的部分代码，但可能它无法工作，因为该代码位于一个扩展组件的类中)
这是密码
import React from "react";
import Button from 'react-bootstrap/Button';
import {aulas} from '../props/aulas';
impor
浏览 1提问于2022-09-04得票数 0
我通过导入react-bootstrap组件来使用react-bootstrap，但是由于某种原因，类样式并没有应用于元素，即使我可以看到bootstrap类被赋予了DOM中的相应元素。我使用自己的类来定位，它不会覆盖任何东西。有没有人知道哪里会出问题？例如：
import React, { Component } from 'react'
import {Alert} from 'react-bootstrap'
class Error extends Component {
render() {
const {errorText} = this.props
浏览 1提问于2017-04-22得票数 1
我使用Reactjs将表窗体与两个子节点按钮和行进行了对比。
更改每个子节点的值后，父节点接收新状态，
但没有重审，为什么？
<!DOCTYPE html>
<html>
<head>
<title> w3du </title><meta charset="utf-8">
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"
浏览 0提问于2018-03-25得票数 1
回答已采纳
我已经通过npm安装了"react-bootstrap-table2“，并且我已经为table编写了一个示例代码，但是当我运行此代码并在浏览器控制台中得到一个错误消息时，如下所示
未捕获的筛选器:无法读取新BootstrapTableContainer (index.js:96)处未定义的属性“”TypeError“”
import React, { Component } from 'react';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
impo
浏览 0提问于2020-04-14得票数 0
我的站点使用Reactive15.6.2
当我更新到16.14.0
加上也有反应.
它错了
每个文档15.x改为16.x应该有效。
src/js/config.js
//This script configures require js and bootstraps the application
//require.js will be concatenated with this file
//using the Makefile so that the resulting boot.js
//is the only JS file required to bootstrap the
浏览 7提问于2022-12-04得票数 0
回答已采纳
1回答
我想用反射带中的Jambotron来设置灰色背景。
我已在规定的地方安装及转介- index.js -
import 'bootstrap/dist/css/bootstrap.css';
我在SignIn.js中实现了-
import React from 'react'
import Amazon_logo from '../../assets/Amazon_logo.png'
import { Jumbotron, Container } from 'reactstrap';
function SignIn() {
浏览 3提问于2021-07-28得票数 0
回答已采纳
我是个新手，尽管尝试了很多次，我还是不知道如何在编辑表单的axios请求中动态设置我的id。 我尝试用一个静态数字设置axios请求，只是为了测试我的编辑表单，我可以记录我的对象，但当我提交它时，它会删除产品数据，而不是用新数据更新，因为id是未定义的。 我想我只需要找出在我的componentDidMount和handleSubmit中写什么来捕获id。例如，${this.state.product.id}是未定义的，为什么它不工作？ 这是我的第一个问题，所以我希望我说得很清楚，如果你需要更多的代码，请告诉我。 EditForm import React, { Component } fr
浏览 30提问于2020-07-26得票数 3
回答已采纳
2回答
我的.js和.css文件遵循了与模板中相同的结构，但它没有导入/使用我的css。只有当css在同一个文件中时，我才能让它工作。我哪里错了？
.js：
import React from 'react';
import './Testcss.css';
export default function TestFunction(){
return (
<div class="ParentDiv">
<div class="SubDiv">
浏览 3提问于2021-03-04得票数 1
1回答
我有一个代码，我试图隐藏导航栏项目时，用户点击一个特定的链接。例如，我有一个主页、个人资料和商店页面，导航栏项目全部为3。如果用户单击个人资料，则个人资料项目应隐藏，如果用户单击商店，则商店应隐藏。我该如何继续并完成这个任务呢？请参阅下面的代码
App.js
import React, {Component} from 'react';
import logo from './pics/KNG.jpg';
import './App.css';
import { BrowserRouter, Route } from 'react-rou
浏览 0提问于2020-05-12得票数 0
我在我的react js代码中使用了react bootstrap Carousel。我成功地定制了react bootstrap Carousel指示器。通过使用以下代码.. div.crausal ol li{
height: 0.3em;
width: 4em;
background-color: #E77728 !important;
} 但我无法更改指示器的活动类的颜色。我已经试过了 div.crausal ol li.active{
background-color: blue !important;
} 但它不起作用。 这是我的carousel类。 <
浏览 18提问于2021-06-17得票数 0
1回答
一般来说，我刚刚开始使用react和javascript开发，我正在尝试嵌套一个组件。主页组件渲染正常，testComp没有显示，非常卡住，请帮助。谢谢! home.component.js import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import testComp from "./test.component";
export default class Home extends Component {
浏览 11提问于2021-03-30得票数 1
回答已采纳
5回答
我对react和react-router有意见。当我单击一个链接(在我的示例contact中是Footer.js)时，url会发生变化，但是没有显示所需的组件Location。然后，当我刷新站点时，将显示正确的组件。
App.js:
import React, { Component } from 'react';
import { BrowserRouter as Router, HashRouter, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap
浏览 0提问于2018-04-27得票数 9
我使用了带有嵌入式CSS模块的Create React App，并安装了Bootstrap库。下面是一个示例代码： index.jsx import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.r
浏览 11提问于2020-04-17得票数 1
回答已采纳
我一直在遵循一个教程，我想保留按钮和导航栏的样式，但我也想为按钮等组件实现一些引导。但是，当我从bootstrap导入按钮时，它们的样式不在那里。我能做些什么来解决这个问题吗？ 此外，如果我在注册页面上导入bootstrap.min.css文件，按钮将恢复其样式，但整个网站都会受到引导css的影响。 HomepageButton SignupPageButton BootstrapButton When Bootstrap.min.css Is Imported 教程中的按钮组件 import React from 'react';
import './Button.
浏览 20提问于2021-03-17得票数 1
回答已采纳
我正在尝试从子组件表单<Form handler = {this.handler} />更新我的状态。但当我按回车键时，当前状态值为null。我认为问题出在我的处理程序(E)函数中，但我不知道是什么原因。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
import { Button } from 'react-
浏览 37提问于2018-06-06得票数 0
我正在构建一个更高的组件，其中字段输入与其他组件组合在一起。我正在尝试将我的onChange函数传递给子组件，这样它就可以用新的输入来改变状态。所有其他的道具都可以很好地传递，我可以看到使用chrome工具，但是即使我可以看到onChange函数，如果我在子console.log上使用道具，它在表单控件组件中并不存在，因为它最终创建了输入文本字段。
下面是代码，您可以在表单中注意到呈现FormGroup，它没有使用更高的InputFieldGroup组件：
higher_component.js
import React from 'react'
import * as For
浏览 0提问于2018-03-30得票数 1
回答已采纳
1回答
我是新的反应，我试图创建一个简单的导航与引导和路由使用导航栏。虽然URL改变了，但页面的UI没有呈现。这是我的密码
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import admin from './admin';
import App from './App';
import reportWebVitals from './reportWebVitals';
import weighbride from '.
浏览 5提问于2022-03-21得票数 2
1回答
我有一个按钮，我想要添加我自己的样式，我希望该按钮在被选中时更改颜色，但当前代码的问题是，当按下该按钮时，该按钮的颜色将更改到所需的结果，但一旦我释放单击，该按钮的颜色将恢复到其默认的样式。有人能帮我一下吗？
我的反应元件
import React, { useState } from 'react';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
浏览 1提问于2022-04-01得票数 0
Button.js
import { View, Text, TouchableOpacity, Button} from 'react-native';
import React from 'react';
export default function Btn (bgColor, textColor, btnLabel) {
return (
<TouchableOpacity
style={{
backgroundColor: bgColor,
borderRadius: 100,
浏览 5提问于2022-11-03得票数 2
15回答
我想问为什么当我做一个onClick事件时，我的状态没有改变。我已经搜索了一段时间，我需要在构造函数中绑定onClick函数，但是状态仍然没有更新。
这是我的密码：
import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import BoardAddModal from &
浏览 23提问于2016-12-22得票数 162
回答已采纳
2回答
我试图将简单属性从我的子组件传递给父组件。我一辈子都不明白为什么我会犯这个错误。我对react的理解是，您可以在任何函数或类中声明道具(即this.props.text)，然后将其传递给父函数。
Tickerbox.js (儿童)
import React from 'react';
import './App.css';
function Tickerbox(props) {
return (
<div className="container">
<div className="row
浏览 1提问于2017-07-29得票数 0
回答已采纳
我正在尝试使用react本机ui-kitten来响应本机组件，并且它的工作性能非常好。最近，我想在我的应用程序中添加主题，并使用它们的“RkTheme”和“RkType”，但是没有一个在起作用。
使用RkTheme.setTheme(themeJson)设置主题应更改已在屏幕上呈现的元素的样式。
使用RkTheme.setTheme(themeJson)实际设置主题并不改变已经呈现的组件集的样式。
下面是json包的一部分
"dependencies": {
"prop-types": "^15.6.1",
"react":
浏览 0提问于2018-10-14得票数 1
回答已采纳
1回答
我在导航栏中使用NextJS引导，但有一个问题，因为动态页面更改了React，接下来在移动视图中，菜单在单击链接并加载新页面后保持打开状态。
尝试了几种方法试图关闭页面上的更改，但没有成功。实现这一目标的最佳方式是什么？
import { useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowDownCircle } from 'react-bootstrap-icons'
import
浏览 2提问于2021-11-14得票数 2
下面的代码给了我一个Uncaught Invariant Violation。我不知道为什么。它几乎完全复制自Bootstrap示例。
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'LoginForm'.
import React from
浏览 13提问于2016-09-01得票数 0
1回答
嗨，我试图根据道具的值为我的应用程序做setState，但当我将函数传递给setState时，我收到的道具是未定义的，不知道为什么，我跟踪作为参考。您可以阅读以下状态更新可能是异步的部分，这是我的代码(来自Form.js文件的代码片段)
this.props.setTodos(function (_, props) {
console.log("this is props:" + props);
return [
...props.todos,
{ text: props.inputText, completed: fal
浏览 4提问于2021-07-08得票数 2
回答已采纳
1回答
我遇到了一个问题，react-loadable导致我的一个输入组件在状态更新后重新呈现并失去焦点。我已经做了一些调查，我找不到有这个问题的其他人，所以我想我在这里遗漏了一些东西。
我试图根据用户选择的主题使用react-loadable动态地将组件包含到我的应用程序中。这很好用。
/组件/应用程序
import React from 'react';
import Loadable from 'react-loadable';
/**
* Import Containers
*/
import AdminBar from '../../co
浏览 1提问于2018-07-03得票数 1
回答已采纳
我已经为我正在使用react-bootstrap构建的一个小型web应用程序构建了一个自定义分页设置。我已经让所有的集成和分页工作正常。我对react / bootstrap比较陌生，没有做过很多css。我希望尽可能避免使用css，这就是我选择使用react-bootstrap的原因 我遇到的问题是不能让我的分页显示在块的中心： ? 我的react钩子看起来像这样： return (
<div>
<div align="center">
<div className=&#
浏览 73提问于2020-10-11得票数 1
1回答
嗨，这是我早期的frontend技能。我知道bootstrap正处于从3到4的过渡阶段，我决定遵循最新的版本。我选择了我的包裹的react-bootstrap。如果我做错了，请告诉我。我愿意实践最好的解决方案。
这是我的装置。
package.json
{
"name": "f1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@amcharts/amcharts3-react": "
浏览 2提问于2018-05-30得票数 0
我是React领域的一个新手，现在我想知道为什么每次我在页面上做更改时都会呈现这段代码，它总是呈现没有更改的组件，例如：
<Grid columns="equal" className="app" style={{ background: secondaryColor.hex }}>
<ColorPanel
key={currentUser && currentUser.name}
currentUser={currentUser}
/>
<SidePanel
浏览 6提问于2019-11-05得票数 2
回答已采纳
2回答
我正在从ReactJs转移到React-Native，并发现了这个函数结构
class Button extends React.Component<{
title: string,
onPress: () => any,
color?: ?string,
hasTVPreferredFocus?: ?boolean,
accessibilityLabel?: ?string,
disabled?: ?boolean,
testID?: ?string,
}> {
static propTypes = {
/**
* Text
浏览 2提问于2018-06-02得票数 5
我创建了一个导航栏，创建了一些像视频交换这样的页面，所以我创建了一个路由器(链接)到视频浏览器页面，但是我从主页上按下，VideoLecture上显示了一个导航条，它什么也没有显示，navbar已经消失了，我还试图在VideoLecture页面中编写一些代码，但它还是不会取消CodeBelow。
NavBar.js
import React from 'react';
import {Navbar,Nav,Container} from 'react-bootstrap';
import {Routes, Route, Link} from "react
浏览 9提问于2022-02-05得票数 0
1回答
将(自定义) CSS模块与React组件中的Bootstrap组合在一起的最佳方法是什么？我使用引导CDN来获取样式并在组件中使用它们。如何使用连接到组件的模块将自定义样式应用于(例如) .nav-link ？换句话说，我如何覆盖Bootstrap的默认样式？假设下面是我的代码：
组件
import React from "react";
import styles from "./Navbar.module.css";
function Navbar() {
return (
<nav className="navbar na
浏览 2提问于2020-01-12得票数 5
我试图创建一个多页面应用程序与反应路由器，但我不断得到这种类型的错误。我不知道如何解释的情况，因为我是新的反应，但我试图添加登录页面到应用程序。对新的想法或方法也开放。
Index.html
<!--LayoutTop-->
<!DOCTYPE html>
<html lang="zxx">
<head>
<!--Head Here-->
<title>AFRIGraphy</title>
<meta charset="UTF-8">
<meta
浏览 2提问于2020-08-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
