当我向React组件添加css时，该组件停止工作
当你向React组件添加CSS时，该组件停止工作可能是由于以下几个原因：
- CSS语法错误：检查你添加的CSS代码是否存在语法错误，比如拼写错误、缺少分号等。可以使用在线的CSS验证工具来检查代码的正确性。
- CSS冲突：可能存在CSS样式冲突，即不同的CSS规则之间存在冲突，导致组件无法正常显示。可以通过使用浏览器的开发者工具来检查元素的样式，并查看是否存在冲突。
- CSS选择器问题：确认你的CSS选择器是否正确，确保选择器能够正确地匹配到组件的DOM元素。可以使用开发者工具来检查DOM结构和选择器是否匹配。
- CSS权重问题：CSS样式的权重可能导致某些样式无法生效。可以通过提高选择器的权重或使用!important来解决。
- CSS加载问题：确认CSS文件是否正确加载，可以通过查看网络请求或使用开发者工具来检查CSS文件是否成功加载。
如果以上方法都无法解决问题，可以尝试以下步骤：
- 检查React组件的代码：确认组件的代码是否正确，是否存在其他错误导致组件停止工作。
- 检查React版本和相关依赖：确认你使用的React版本是否与CSS库或其他依赖兼容。有时候，不同版本之间可能存在兼容性问题。
- 检查React组件的生命周期：确认组件的生命周期是否正确使用，是否存在错误的生命周期钩子函数。
- 检查React组件的props和state：确认组件的props和state是否正确传递和更新，是否存在错误导致组件停止工作。
总结起来，当你向React组件添加CSS时，组件停止工作可能是由于CSS语法错误、CSS冲突、CSS选择器问题、CSS权重问题、CSS加载问题、React组件代码错误、React版本和相关依赖问题、React组件生命周期问题、React组件props和state问题等原因导致的。
相关·内容
下面是ListEmployeeComponent的代码
import React, { Component } from 'react';
import EmployeeService from '../service/EmployeeService';
class ListEmployeeComponent extends Component {
constructor(props){
super(props)
this.state = {
employees : []
}
浏览 15提问于2022-01-22得票数 0
1回答
我有一个应用程序，其中我有两个完全不同的页面的两个不同的css文件。 one.Component.js应包含style1.css，two.Component.js应包含style2.css 我已经在组件文件中单独导入了css文件。但是，当加载组件时，两个css都会发生冲突，页面会折叠。 one.Component.js： import React, { Component } from "react";
import 'style1.css';
export default class ComponentOne extends Component {
浏览 30提问于2021-06-10得票数 0
2回答
在尝试通过道具将函数(UpdateEvents)从App.js文件传递到NumberOfEvents.js文件时，我遇到了一个问题。我将相同的函数传递给另一个没有问题的组件。然而，当我尝试NumberOfEvents文件时，我得到以下错误：请帮助！
以下是家长：
import React, { Component } from 'react';
import EventList from './EventList';
import CitySearch from './CitySearch';
import NumberOfEvents fr
浏览 0提问于2021-08-19得票数 0
回答已采纳
1回答
我在react路由器上使用两个主要布局，如下所示。我已经编写了AppRoute组件来使用不同的布局与开关。
问题是，当我从"/login“或"/register”路线返回"/“家时，一些与"LayoutLoginRegister”相关的导入css仍然停留在浏览器中。所以它打破了这一页。因为这个css属于"LayoutLoginRegister“而不是"LayoutLanding”。
App.js
const AppWrapper = styled.div`
margin: 0 auto;
min-height: 100%;
`;
co
浏览 22提问于2018-06-01得票数 1
回答已采纳
1回答
我的React本机应用程序有问题。每次我从expo中添加expo组件时，来自react-native-elements的<Button />组件都会停止工作。
示例：
我的按钮可以很好地完成这个实现：
render() {
const { containerStyle, adContainerStyle } = styles;
return (
<View style={{ flex: 1 }}>
<View style={containerStyle}>
<Button
title=
浏览 2提问于2017-08-02得票数 1
回答已采纳
index.js页面： import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import NewUpload from './components/newUpload';
import Testing from './components/Testing';
import Landing from '.
浏览 8提问于2020-03-29得票数 0
1回答
我刚开始建造这个购物车项目。当我手动更改url时，我能够很好地显示组件，但是--当我将Link元素添加到Nav时，我的应用程序就停止工作了。为什么会发生这种事？
我想要显示不同的组件时，他们被点击。
当我将Link元素添加到导航栏时，控制台中会出现以下错误：
The above error occurred in the <Link> component
Uncaught Error: useHref() may be used only in the context of a <Router> component.
import React from "rea
浏览 12提问于2022-04-11得票数 0
回答已采纳
1回答
我使用webpack并有一个简单的react应用程序，其中我想使用组件。当我想在我的应用程序中使用这个组件时，我会得到错误：
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of anot
浏览 1提问于2015-09-11得票数 1
回答已采纳
3回答
我试图在某个页面上以不同的方式定位这个组件。但是，当我为它提供另一个className属性时，它只使用声明组件时提供的原始类的样式。
构成部分：
import React, { Component } from 'react';
import styles from './label.css';
class Label extends Component {
render() {
return (
<div className={styles.labelClass} />
);
}
}
export defau
浏览 0提问于2016-12-01得票数 3
回答已采纳
React-css-modules动态生成类名，以限制使用独立组件时的名称冲突。这太棒了。但是，一旦加载了DOM，并且您需要将一个类作为动画的目标，那么css-module产生的类名就会被分成几个部分随机化。
该怎么做呢？
浏览 3提问于2016-09-10得票数 4
2回答
我有一个问题的反应路由器，当我运行应用程序的主页显示，但其他不呈现，我使用某些库的导航栏，调用反应响应-动画-导航条，Nav条工作正常，URL是改变当我点击，但我为路径/url指定的组件没有呈现。我尝试了一些我在堆栈溢出和github上找到的解决方案，但它们都不起作用。
代码：
App.js
import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavigationBar
浏览 2提问于2021-02-27得票数 0
1回答
样式-部件停止工作。我可以毫不费力地使用样式化组件，但是在完成重构(创建子组件)之后，一些样式化的组件突然停止工作。
import React from "react";
import ReactDOM from "react-dom";
import MainWindow from "./components/mainWindow";
import SubWindow from "./components/subWindow";
import "./index.css";
import styled from
浏览 0提问于2020-12-01得票数 0
作为一个初学者，我正在和我的团队一起开发一个react应用程序。以前一切都还好。但是，当我们将所有CSS脚本应用到所有前端页面时，即使我们在最前端调用它们，也会出现几个CSS问题。(例如我的朋友在这里添加了她自己的CSS脚本(页面)到java脚本页面，我在我的java脚本页面添加了我的CSS页面，即使这两个页面都没有连接，应用的CSS页面会影响整个项目，甚至对父页面也是如此。) 通过一个接一个地调用类名来重新创建项目是很困难的。 有没有简单的方法可以忽略这种CSS的影响？
浏览 32提问于2021-09-24得票数 1
在下面的场景中，我试图制作一个简单的+/-计数器，就像在购物应用程序中一样。当我尝试添加的时候，它工作得很好。当我删除时，它应该停止工作，当它涉及到0。我该怎么做呢？
import React from "react";
class Clicks extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
clickAdd() {
this.setState({
count: this.state.count
浏览 2提问于2022-06-18得票数 0
3回答
我想在react JS中设置组件的样式。我尝试了几种方法来做到这一点。当我尝试创建一个CSS对象并将其应用于同一JS文件中的组件时，它就可以工作了。但是当我尝试从外部CSS文件中应用CSS并将其导入到JS文件中时，它不起作用。我还尝试将该文件另存为filename.module.css。但这对我没什么帮助。 已安装的节点模块及其版本列表如下所示。 > @material-ui/core@4.9.11
> @material-ui/icons@4.9.1
> firebase@7.14.1
> react@16.13.1
> react-dom@16.13.1
&
浏览 31提问于2020-04-25得票数 0
回答已采纳
我使用了React、react-router和materialize css。我想在我的主页上添加一个简单的视差效果，当我第一次加载页面时，它正在工作： import React from 'react'
import M from 'materialize-css';
import Cinema from '../cinema1.jpg'
const Home = () =>{
document.addEventListener('DOMContentLoaded', function() {
浏览 16提问于2019-01-06得票数 1
我有一个带有html的应用程序： <div id="react-root-navbar"></div>
<div id="react-root-body"></div> 以及相应的React组件，它们调用每个div上的React.DOM.render。 两个React组件都使用Material UI组件。因此，为每个组件注入了一组内联样式。 问题是，与第一个组件相比，第二个组件的所有样式在HTML中的位置会更低，因此这些CSS规则将具有更高的优先级。这会中断预期的级联流，并导致许多不正确的样式。例如，.MuiPa
浏览 15提问于2020-12-05得票数 3
回答已采纳
我在Laravel 5.5中使用React时遇到了一些问题。每次我添加或更改组件时，我都必须运行npm run dev来编译它。当我这样做时，css/app.css的内容会被重置，所以我不能把样式写到这个文件中。
如果我将样式放在另一个CSS文件中，样式将保持不变，但我希望将我的主要样式写在css/app.css中。
我该怎么做呢？
浏览 0提问于2017-10-14得票数 0
1回答
我有反应密码-像这样的引导程序。
import React from 'react'
import { Link } from 'react-router-dom'
import { Navbar, NavbarBrand, NavItem, Nav } from 'react-bootstrap'
import './App.css'
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle'
import Routes from './Rout
浏览 1提问于2020-09-22得票数 1
回答已采纳
1回答
React功能
、、、、
我有一个内容组件，它呈现2个Panel组件。内容组件将其状态传递给面板1，并将其传递给面板2。(面板1最初可见，面板2不可见)
期望的功能：
当用户单击“隐藏”组件时，它将其设置为可见组件并隐藏可见组件。
如果用户单击现在可见的组件，什么都不会发生，但是如果单击了现在隐藏的组件，则该组件将变为可见的，并且该可见组件将返回隐藏状态。
Content.jsx
import React, { useState } from "react";
import Panel from "../panel/Panel";
import "./conte
浏览 4提问于2021-09-21得票数 1
回答已采纳
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
我到处寻找这个问题的答案--我非常确定这是我在React应用程序中布局组件的方式：
在React中制作我的投资组合页面时，我使用了CREATE REACT应用程序，在它完成并在本地正常运行后，我对主页和构建等的package.json文件进行了必要的更改。然后，当我使用Yarn部署时，主机链接将打开我的网站-但没有我的一个组件:内容。该组件包含一个开关，根据路由，该开关将在包含该路由的页面正文中显示适当的内容。
当我点击导航栏时，它会将我带到三条路线中的任何一条--包括一个正确显示的主页--但只有在页面首次加载并点击导航栏之后，主页才会显示出来。
为什么会这样呢？再说一次-它在本地运行得很好，
浏览 3提问于2018-11-15得票数 2
2回答
我在React上有一个简单的组件--app。当我回答一个问题时-我的组件重新呈现新的问题，并且我想要有一个问题块的动画。但是，我只有这个组件第一次渲染时的一次性动画。如何在组件的每一次重新渲染上制作动画？
下面是我的沙箱示例--
下面是我的代码：
import { useState } from "react";
import "./styles.css";
const questions = ["1", "2", "3", "4", "5"];
const answers =
浏览 23提问于2021-02-23得票数 0
回答已采纳
我有一个非常基本的程序，应该是隐藏一个正方形时，我的按钮被按下。在游戏组件中，每当我按下按钮时，它似乎都更新得很好，并在我按下当前可见性的按钮时发送警报。但是当我尝试更新正方形的可见性时，它不起作用。 import React from "react"; import ReactDOM from "react-dom"; import "./index.css";
function Square(props) {
return (
<div className="square" style={{
浏览 12提问于2020-12-04得票数 0
回答已采纳
var React = require('react'),
ReactDOM = require('react-dom'),
Router = require('react-router').Router,
Route = require('react-router').Route,
SiteLanding = require('./components/landing/SiteLanding'),
KanbanBoard = require('./component
浏览 2提问于2016-02-12得票数 0
回答已采纳
1回答
我目前正在尝试更新到样式化的组件5.0.0，但我遇到了一些问题，我的JEST测试停止工作。我已经降级到4.2.1，但是仍然更新了babel@预设-react、预设-env、core和其他一些软件包。当我尝试运行npm测试时，我得到了这个错误：
“既找不到样式-组件秘密内部”，它指向import 'jest-styled-components'; Jest样式-组件也被更新为7.0.0。
浏览 1提问于2020-01-22得票数 9
1回答
我正在开发一个应该在移动设备上运行的React JS应用程序。
下面是该应用程序的代码摘录：
index.tsx：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
浏览 4提问于2022-02-13得票数 1
4回答
在这里，我提供了我的代码，在这里我想要在密码输入字段中输入字符，并且我不想在其中输入空格/空格，但是当我打印输入值时，它也会进入其中，然后它不包含空格/空格。请帮我解决这个问题。
密码-
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { Form, Input, Label } from "semantic-ui-react";
class App extends React.Componen
浏览 1提问于2019-03-06得票数 1
回答已采纳
当我试图创建一个组件库以供响应时，我一直得到以下无效错误。
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named impo
浏览 16提问于2022-01-12得票数 1
我想要做的是显示一个组件，该组件包含一个ag-grid表、一个侧栏和另一个组件，该组件是另一个ag-grid表。好的，当我启动程序时，它在一开始运行良好，但是当我转到我告诉你应该显示的组件的路径时，出现了这个错误消息：
错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: object。
检查ConsultaNiños的render方法。
下面是ConsultaNiños的代码，其他所有代码都是：
import React, {Component} from 'react'
import SideBar from './SideBar&#
浏览 0提问于2020-05-03得票数 0
1回答
我正在使用，并遵循网站上的第一个示例：
function MyDropzone() {
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
Hello
</div>
);
}
我想创建一个包装类，如下所示：
function MyDropzone() {
const
浏览 0提问于2021-06-06得票数 0
1回答
我有一个子组件需要使用spectre.css，但是当我在子组件中导入spectre.css时，父组件也会受到影响。如何使spectre.css只应用于子组件？谢谢
父组件：
class ParentComponent extends React.Component{
render(){
return <ChildComponent></ChildComponent>
}
}
在儿童部分，
import from 'spectre.css'
class ChildComponent extends React.Compo
浏览 0提问于2019-03-26得票数 1
我对评论和打字还是很陌生的。我有一个过滤器搜索栏，它根据用户输入的内容进行过滤。这也显示一个下拉列表，如果点击.
我遇到的问题是，当我单击该选项时:条形图没有显示我单击的选项。即使我输入了一些输入，然后单击这些选项，也会显示一个空白栏。
单击该选项时显示该选项的最简单方法是什么？
此外，如何将数据移动到JSON文件这样的不同文件中，并将其导入到这里，并在<Select/>中使用它来代替数据。
import * as React from 'react'
import Select from 'react-select/'
const data =
浏览 7提问于2020-07-14得票数 0
我想在使用react-bootstrap breadcrumb时更改背景颜色。同时，我使用react-router-dom来实现breadcrumb
import React from 'react';
import { Link } from 'react-router-dom';
import { Breadcrumb, BreadcrumbItem } from 'react-bootstrap';
export default (props = {}) => {
const items = props.items.map
浏览 0提问于2020-08-27得票数 0
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Projects from './components/Projects';
import Abou
浏览 9提问于2021-11-17得票数 0
2回答
我正在尝试使用styled_components替换一些文本，当行用下面的css样式中断时：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
但是，当我使用文本溢出和/或空白样式时，会出现错误，因为textOverflow和whiteSpace不是有效的样式属性。
如何使用styled_components应用该样式或对本机StyleSheet作出反应？
谢谢!
反应，反应本机e样式的组件版本
{
"react": "16.13.1",
"react-native"
浏览 16提问于2022-01-26得票数 0
我试图将状态作为支柱传递给子组件，当状态被传递时，构造函数和子组件的componentDidMount中的道具是空的。但是在呈现方法中，道具并不是空的
我的父组件:项目
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import NewTask from '../../../TaskList/NewTask/NewTask';
import Tasks from '../../../TaskList/Tasks/T
浏览 0提问于2018-10-03得票数 1
回答已采纳
2回答
我正试着把我的应用程序移植到webpack 4，我的头已经疼了。
动态导入--这是我的代码分割方法(一页一页)。但我不能让它起作用。使用以下软件包建立了非常简单的测试程序：
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-po
浏览 0提问于2018-06-21得票数 7
1回答
我在为每个给定标签的子代应用css样式而挣扎。我正在使用CSS模块和语义-ui-react：
character.module.css
.Character > GridColumn {
border: solid 4px red;
}
character.js
import React, {Component} from 'react';
import {Grid, GridColumn} from "semantic-ui-react";
import styles from './character.module.css';
浏览 1提问于2019-08-09得票数 1
回答已采纳
1回答
我试图在我的Gatsby项目中使用(react-md)，并发现这些规则没有被应用。因此，当我导入像Button这样的组件并呈现该组件时，它没有任何样式。
下面是我在安装react-md时所做的工作
在我的gatsby-config.js中，我添加了以下内容
plugins: [
'gatsby-plugin-sass'
]
然后，在layouts>index.scss下
@import '~react-md/src/scss/react-md';
然后我将它导入到我的layouts>index.js中
import './index.
浏览 0提问于2018-04-18得票数 0
回答已采纳
1回答
我有下面的类，当我运行我的lint时，我得到了道具验证错误。 `children` is missing in prop validation react/prop-types
// test-utils.js
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
浏览 7提问于2021-03-23得票数 0
回答已采纳
我想在这个主页上添加一个下一步按钮(也包括一个计数器)。但是计数器是在类中实现的，所以我不能使用useHistory()。另外，我不能将函数routeChange() (每次都会弹出错误)放在类的内部/外部的任何地方，该怎么办?我是React的新手，我已经被这个问题困扰了好几个小时了。如果我的问题对平台来说太愚蠢了，我很抱歉。以下是我的方法： import React, { Component } from "react";
import Button1 from "./Button1";
import { Button, } from 'reacts
浏览 9提问于2021-06-29得票数 0
回答已采纳
我的<List.Item as={Link} to={/lists/${list.id}}>中有一个按钮，我想激活它，但as={Link}已经将整个灰色选择转换为一个锚标记；因此，当我单击该按钮时，它只将我链接到路由，而不是执行onClick删除功能。如何维护onClick删除<DeleteButton>的功能，但仍然允许List.item的其余部分(灰色部分)保持链接功能？
Profile.js (照片中的列表组件)
import React, { useContext } from "react";
import { useQuery }
浏览 2提问于2020-05-12得票数 1
回答已采纳
我有一个启动屏幕，有两个按钮，即登录和注册。下面是相同的代码：
import React from 'react';
import Header from './Header.jsx';
import Authentication from './AuthenticateCard.jsx';
import { Redirect } from 'react-router-dom';
function StarterScreen() {
function loginClick()
{
return(<Re
浏览 6提问于2020-07-28得票数 1
回答已采纳
1回答
我们有建立在REACT框架上的UI。我一直遇到的一个问题是，它没有提供用于测试自动化以识别Web元素所需的唯一ID。我不能构建基于CSS路径或web元素的XPATH的测试脚本，因为它将不断变化，从而导致脚本维护方面的更多努力。
我需要知道
哪个框架最适合基于REACT框架测试UI？在这些工具中使用了哪个ID (id、CSS路径、Xpath)？如果我在应用程序中没有获得唯一的ID，那么工作是什么呢？“唯一的-id-混合”会帮助解决这个问题吗？
浏览 0提问于2016-12-20得票数 3
3回答
每当我向代码中添加一个<路由>标记时，屏幕上就会消失所有东西！
我想密码没问题吧！没有任何警告！！
添加<路由>标记之前的输出
当我添加一个<路由>标记时，输出就不再存在了！
添加标记之前的代码：
import React from "react";
import "./App.css";
import Header from "./Header";
import { BrowserRouter, Route } from "react-router-dom";
function Ap
浏览 10提问于2022-02-26得票数 1
回答已采纳
3回答
我在我的项目中使用了react路由器-dom v6和mobex，当我使用它时会得到一个错误，如下所示。
main.tsx：
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app/layout/App'
import './app/layout/styles.css'
import 'semantic-ui-css/semantic.min.css'
import 'react-toas
浏览 16提问于2022-07-30得票数 2
回答已采纳
我正在尝试使用react学习css转换组。当我运行下面的代码时，我的页面将淡入。
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
import { createHistory } from 'history';
import ReactCSSTransitionGroup from 'react-
浏览 2提问于2016-09-27得票数 1
1回答
我想为我的肚脐改变一些标签文本的样式。每当我单击选项卡时，我想在页面之间切换。为此，我希望该选项卡处于活动状态。我把代码写成：
Header.js
import React from "react";
import "./Header.css";
import Tab from "./Tab";
const tabs = ["About", "Portfolio", "Blogs", "Contact"];
const Header = () => {
const
浏览 3提问于2022-01-10得票数 -1
回答已采纳
我一直在摆弄我的网站布局，我的text-align : center;在我将所有div位置设置为相对后停止工作，当我使用javascript向其添加组件时，父div会改变大小。
下面是我的两个CSS文件：
您可以在下面的JSfiddle链接中看到新版本。
jsFiddle：
我还提供了旧网站的代码(它正确地对齐了文本)：
旧的超文本标记语言与新版本非常相似，我只是在其中一个div中添加了style="float:left;“
浏览 0提问于2012-05-02得票数 13
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
