我正在使用名为“Dialog”的 3rd 方组件和下面的渲染方法。如您所见 - 组件有多个 className。我想创建一个名为 StyledDialog 的样式组件，它包含一个道具，可让我覆盖与具有“SURFACE”类名的 div 关联的宽度。这可以用 Styled-Components 来完成吗 - 或者我是否需要将源代码带入我的应用程序并手动处理。
render() {
const { className, children, onClose, open, ...otherProps } = this.props;
const ariaHiddenProp = open ? {} : { 'aria-hidden': true };
return (
<aside
className={classnames(
ROOT,
{
[ANIMATING]: this.state.animating,
[OPEN]: open,
},
className
)}
onClick={(e) => {
if (onClose) onClose(e);
}}
onTransitionEnd={() => {
this.setState({ animating: false });
}}
{...ariaHiddenProp}
>
<div
className={SURFACE}
onClick={(e) => {
e.stopPropagation();
}}
{...otherProps}
>
{children}
</div>
<div className={BACKDROP} />
</aside>
);
}
根据您的解释，我认为您应该使用styled方法包装这个 3rd 方组件，并通过从包装的样式化组件中引用该组件的相应类名来应用您的样式。
例如，如果现有组件的名称是Hello，则可以styled-component在其任何 DOM 子项上应用 a 样式，如下所示：
const StyledHello = styled(Hello)`
.${classes.SURFACE} {
width: 10rem;
border: 2px solid green;
}
`;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句