我创建了组件并对其进行样式化（使用sass）:
const WidgetCard = (props) => {
return (
<div className={style["widget-card"]}>
{props.children}
</div>
)
}
现在我在小部件中使用这个组件:
const TasksWidget = () => {
return (
<WidgetCard>
<p>SOME AWESOME CONTENT</p>
</WidgetCard>
)
}
但是现在，我需要从我的TaskWidget中追加/更改WidgetCard组件的一些样式（例如宽度）。
我如何用react css模块实现这一点？
当您谈到通过其父组件（高阶组件）更改内部组件时，您可以将TasksWidget中的内联样式注入到WidgetCard中，并将更改功能赋予它，例如:
const TasksWidget = () => {
const styleToInject = { width: 30rem }
return (
<WidgetCard styles={styleToInject}>
<p>SOME AWESOME CONTENT</p>
</WidgetCard>
)
}
然后配置为child以具有接收样式道具的能力:
const WidgetCard = (props) => {
return (
<div style={props.styles ? props.styles : null } className={style["widget-card"]}>
{props.children}
</div>
)
}
更好的做法是用propType定义预期的prop，即便如此，也要将默认值设置为非必需的字段（在我们的示例中为样式:
WidgetCard.propTypes = {
childre: PropTypes.node.isRequired,
styles: PropTypes.obj
}
WidgetCard.defaultProps = {
styles: null
}
因此最终的WidgetCard组件如下所示
const WidgetCard = ({ children, styles }) => {
return (
<div style={styles} className={style["widget-card"]}>
{props.children}
</div>
)
}
签出PropTypes库:https://www.npmjs.com/package/prop-types
您可以将您的样式/类名/宽度作为一个道具从父级传递给子级，并在子级中使用它
const TasksWidget = () => {
return (
<WidgetCard style={{width: '40px'}} className="new-width" width="40px">
<p>SOME AWESOME CONTENT</p>
</WidgetCard>
)
}
const WidgetCard = (props) => {
return (
<div className={`${style["widget-card"]} ${props.className}`}
style={...props.style, width: props.width}>
{props.children}
</div>
)
}
