我正在尝试使用 styled-components
为 React 组件扩展样式,但没有成功。
AFAIK,我正在以正确的方式进行操作,但也许我遗漏了一些东西......
这是我所拥有的:
import React from "react";
import styled from "styled-components";
const TextContainer = ({ text }) => {
return <p dangerouslySetInnerHTML={{ __html: text }} />;
};
const Paragraph = styled(TextContainer)`
background: red;
`;
class Home extends React.Component {
render() {
const { t } = this.props;
return <Paragraph text="This is a test" />;
}
}
export default Home;
当然,预期的结果是在 p
上有一个红色背景,但现在输出看起来像这样:
关于如何解决这个问题的任何想法?可能我遗漏了什么,但我不知道是什么。
提前致谢!
最佳答案
如文档中所述:
The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.
示例
// This could be react-router-dom's Link for example, or any custom component
const Link = ({ className, children }) => (
<a className={className}>
{children}
</a>
);
const StyledLink = styled(Link)`
color: palevioletred;
font-weight: bold;
`;
render(
<div>
<Link>Unstyled, boring Link</Link>
<br />
<StyledLink>Styled, exciting Link</StyledLink>
</div>
);
引用:https://www.styled-components.com/docs/basics#styling-any-component
关于css - 使用样式组件扩展样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54113367/