react给自定义组件添加className后设置样式不生效

最新推荐文章于 2023-11-17 20:24:21 发布
最新推荐文章于 2023-11-17 20:24:21 发布
阅读量5.4k 收藏 4
点赞数 1
文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53987671/article/details/122360451
版权

问题：

如图所示：在根组件App中，Search和Show是自定义的子组件，想给Search组件设置一个灰色的背景色。

在app.css中进行设置：

但是红色框的部分（Search组件并没有灰色背景出现） 

后面发现className被当做一个参数传递给了Search组件：

解决：

在Search组件的最外层的div上添加一个className

 在Search组件的css样式文件中设置背景颜色

 样式设置成功：

菜鸟娇嗔
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design不能修改样式，添加的className没有生效？看这里
和合河禾何
10-17 8898
我是用了antd的Table控件，想为table设置单双行不同颜色，于是使用了rowClassName <Table pagination={dataPagination} columns={this.dataTableColumns} dataSource={this.dataSource} locale={{ emptyText: <NoContent/>...
【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题
miaomiao_666666的博客
12-12 2273
【已解决】关于新版本react-router-dom中NavLink添加自定义高亮样式类名不生效的问题
为react组件增加扩展class,解决react组件不能自定义className不生效的问题
qq769298218的博客
11-18 2622
这里写自定义目录标题为react组件增加扩展class,解决react组件不能自定义className不生效的问题最近在写shopify,发现不能对shopify的组件再次加class,弄起来很麻烦,最后研究出来了这个曲线的方法用法: 这样处理,之前组件的属性还是可以正常使用的 为react组件增加扩展class,解决react组件不能自定义className不生效的问题 最近在写shopify,发现不能对shopify的组件再次加class,弄起来很麻烦,最后研究出来了这个曲线的方法 import Rea
使用react-router-dom中的＜NavLink＞activeClassName样式不生效
sinat_15625949的博客
11-05 2681
问题 使用react-router-dom中的<NavLink>切换页面时activeClassName样式不生效 原因 本地react-router-dom包已经更新到最新6.0.0-beta.8版本，beta版本不稳定 解决方法1 由于beta版本不稳定，建议回到稳定版本V5.3.0 解决方法2 使用最新版本react-router-domV6.0.0以上，可以通过className和style属性进行修改active状态。 两个属性都是通过箭头函数接收到isAc
react 子组件不能直接加类名
见贤思齐焉，见不贤内自省
09-21 2341
在react 中使用子组件不能直接使用calssName，会默认识别为你要传递的参数key为className 值为你的类名 所有加不上样式 只有在子组件写className才能使用上该类名，或者接受传递过来的className，以变量得形式加类名。 render() { return (<div className="box"> <Header className='header'></Header>
导入css后className使用字符串不生效问题
宅斗士的博客
09-04 1216
因为umi默认开启了CSS Module功能，必须使用如下形式： // index.ts文件 import 'styles.css'; // <div className={styles.normal}>Content</div> // 下面的形式不会生效 <div className='normal'>Content</div> /*styles.css文件*/ .normal { color: red; } 若是要使用字符串字面量的形式，那么必须在
react 内联样式不能使用style解决方式
miin_ying的博客
05-18 878
<h3 className={styles.indexBlcokh} ref={(node) => { if (node) { node.style.setProperty('padding-top', '10px', 'impo...
react自定义日期组件datePicker
01-13
本案例中，我们关注的是一个使用TypeScript（ts）和React的JSX语法（tsx）实现的自定义日期选择组件——`datePicker`。 `datePicker`组件通常包含以下几个主要部分： 1. **UI结构**：组件的视觉呈现，包括日历图标...
React Native自定义组件与输出方法详解
01-20
在React Native开发中，有时预设的组件并不能完全满足我们的需求，这时我们就需要创建自定义组件。同时，为了将原生（Native）功能集成到React Native应用中，我们需要了解如何输出原生模块（Native Module）。 ...
React Native自定义标题栏组件的实现方法
01-20
在React Native中，自定义组件是提升开发效率和代码复用性的重要手段。本文将详细介绍如何创建一个不带返回按钮的自定义标题栏组件。首先，我们要了解React Native的基础组件和样式系统。 基础组件`View`和`Text`在...
react-props-classnames:轻松将组件的props转换为类名
05-14
React Props类名 轻松将组件的props转换为类名 当您想通过道具控制样式时，可以很好地与styled-components一起使用。 将您的布​​尔值和字符串属性转换为className。 自定义的classNames前缀。 安装 yarn add react-props-classnames 例子 用法 import styled from 'styled-components' ; import createPropsTransform from 'react-props-classnames' ; const propsTransform = createPropsTransform ( { prefix : 'my-button' , props : [ 'circle' , 'size' ] , } ) ; const Button = styled .
React通过父组件传递类名给子组件的实现方法
10-19
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React通过父组件传递类名给子组件的方法,需要的朋友可以参考下
React组件定义多个className的方法
weixin_41387874的博客
04-12 2081
React组件定义多个className的方法 问题背景 有时需要对一个jsx中的元素定义多个类名，但是因为jsx不允许重复的属性，所以不能直接使用多个className。 解决方法 使用字符串拼接 import styles from './index.module.scss'; interface PropsType{ className: string; } const app: React.FC<PropsType> = () => { return (
修改 React 引入的组件样式，添加className
GotYoung的博客
05-07 1049
今天做了一个购物车的按钮组件，由于是放在很多个页面，就把它作为一个公共组件用。 在不同的页面样式不一样。一开始是在引入的组件起样式名 className ，但是页面解析不出来。 后来就在原来的组件命名就可以解析出来了。 所以可以在任意页面对 公共组件购物车按钮 进行样式的修改，直接获取它的className 即可。 总结：对于引入的组件无法添加className，只能在原来的组件添加。 ...
react中设置activeClassName的笔记
小墨蛇的博客
11-17 768
React是一种流行的JavaScript库，用于构建动态用户界面。它具有许多有用的组件，其中之一是NavLink组件。NavLink组件用于在React应用程序中创建链接，并且它具有许多有用的属性，例如选中的样式设置。
React-class ——React 组件、 React Props（属性传值）、React State（状态）
qq_52301431的博客
10-11 1856
这是标题2这是标题2);}}方式2：通过React自定义组件（DOM元素）：**函数定义**//箭头函数const MyApp = () => 这是一个段落
react动态添加样式：style和className
热门推荐
suwyer的博客
08-07 13万+
react开发过程中，经常会需要动态向元素内添加样式style或className，那么应该如何动态添加呢？？？ 一、react向元素内，动态添加style 例如：有一个DIV元素， 需要动态添加一个 display:block | none 样式， 那么： &lt;div style={{display: (index===this.state.currentIndex) ? "bloc...
react中style和className使用
你蠢哭我咯的博客
04-24 4706
style用法 <div style={{display: this.state.btnFlag ? "block" : "none"}}>按钮</div> // 多个用,隔开 <div style={{display: this.state.btnFlag ? "block" : "none", width: '20px'}}>按钮</div> ...
react中自定义组件showToast
最新发布
04-30
在React中自定义组件showToast的骤如下[^2]： 1. 首先，在components文件夹中创建一个名为Toast的文件夹，并在该文件夹中创建一个名为Toast.js的文件。 2. 在Toast.js文件中，导入React和所需的样式文件。 ```javascript import React from 'react'; import './Toast.css'; ``` 3. 创建一个名为Toast的函数组件，并在组件中返回要显示的内容。 ```javascript function Toast() { return ( <div className="toast-container"> <p className="toast-message">This is a toast message</p> </div> ); } ``` 4. 在Toast组件中，使用所需的样式和布局来定义组件的外观。 ```css .toast-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #000; color: #fff; padding: 10px; border-radius: 5px; } .toast-message { margin: 0; } ``` 5. 最后，在需要显示Toast组件的地方，导入Toast组件并将其放置在合适的位置。 ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import Toast from './components/Toast'; ReactDOM.render(<Toast />, document.getElementById('root')); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值