代码之家 › 专栏 › 技术社区 › Abdul Rafay

反应-子组件样式表覆盖其他子组件的样式表

reactjs css

Abdul Rafay · 技术社区 · 7 年前

我想分开申请 styleSheets 样式表 但由于样式被覆盖而无法实现。

儿童.jsx:

import React from 'react';
import "./childa.css"

export default () => <h1>Child A!</h1>;

儿童.css:

h1 {
  color: blue;
}

儿童b.jsx:

import React from 'react';
import "./childb.css"

export default () => <h1>Child B!</h1>;

儿童b.css:

h1 {
  color: red;
}

样式表

4 回复 | 直到 7 年前

Bayek 7 年前

css已经编写好了,所以我不能使用内联样式。有吗这样我就不必重命名所有

简短的回答:你现在还不能做到这一点。

本文解释了所有不同的 ways to style react components . 在你的情况下,你能做的就是使用 css modules 将泛型类重命名为 h1 .h1 .

查看这篇关于css模块的文章: Modular CSS with React

注: css模块 在中不可用 create-react-app . 如果你一定要用的话,这里有一个关于 how to use CSS Modules with create-react-app .

axiedrella23 7 年前

我认为这是由进口顺序引起的。在父组件中

import React from 'react'
import ChildA from './ChildA'
import ChildB from './ChildB'

h1 规则将覆盖第一个

应该为组件使用类,或者使用内联样式

Mosè Raguzzini 7 年前

-1

Seth Duncan 7 年前

这可能不适用于整个应用程序,但我通过对元素(.childA和.childB)应用一个类来修复它。这就解决了问题。

export default () => <h1 className='childB'>Child B!</h1>;

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前