如何在扩展组件上重写className？
如何在扩展组件上重写className？
提问于 2016-12-01 05:10:11
我试图在某个页面上以不同的方式定位这个组件。但是，当我为它提供另一个className属性时，它只使用声明组件时提供的原始类的样式。
构成部分：
import React, { Component } from 'react';
import styles from './label.css';
class Label extends Component {
render() {
return (
<div className={styles.labelClass} />
);
}
}
export default Label;在页面中，我想以不同的位置定位它：
import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';
class Page extends Component {
render() {
return (
<div>
<Label className={styles.positionLeft} />
</div>
);
}
}
export default Page;通常是用自定义样式来实现的，但是我必须使用媒体查询，所以在这种情况下这是不可能的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-12-01 05:50:18
我通过向组件中添加另一个可选属性customClass来修正它。
标签
import React, { Component } from 'react';
import styles from './label.css';
class Label extends Component {
render() {
return (
<div className={styles.labelClass + ' ' + this.props.customClass} />
);
}
}
export default Label;页面
import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';
class Page extends Component {
render() {
return (
<div>
<Label customClass={styles.positionLeft} />
</div>
);
}
}
export default Page;Stack Overflow用户
发布于 2016-12-01 05:13:03
由于<Label>是一个自定义组件，所以可以手动传递className支柱。
这是默认道具!的一个很好的用例
class Label extends Component {
render() {
return (
<div className={this.props.className} />
);
}
}
Label.defaultProps = {
className: styles.labelClass
}这样，如果没有向className提供Label，它将使用labelClass样式，否则，它将使用支柱。
Stack Overflow用户
发布于 2016-12-01 05:16:05
您需要从className的道具中显式引用Label属性-尝试：
import React, { Component } from 'react';
import styles from './label.css';
class Label extends Component {
render() {
let { className } = this.props
if (!className) {
className = styles.labelClass
}
return (
<div className={className} />
);
}
}
export default Label;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40911516
复制
相似问题
如何根据键列表进行不同的mysql行更新
如何设置mysql存储过程以便使用变量进行更新
用于更新变量的MYSQL存储过程为0
MySQL存储过程变量
MySQL存储过程变量
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
