我遇到了样式组件的问题,我不确定这是技术限制,还是我的如何使用它们的心理模型是错误的。
在这个例子中(我只是在Codepen中快速写了它,所以忽略了拼写错误)我有一个组件,它是一个span中的用户名。我希望能够在任何地方使用该组件,因此它的样式非常小:
// From User.js
import React from 'react';
import styled from 'styled-components';
const Username = styled.span`
color: black;
`
const User = () => (
<UserName>bla</Username>
);
export default User;
我希望能够在另一个组件中使用此span,但在这种情况下,我希望在此上下文中覆盖它的样式:
// From Userblock.js
import React from 'react';
import styled from 'styled-components';
import User from './user';
const UserWrapper = styled.div`
// Some styles
`
const User = styled(User)`
color: red; // Different color when displayed in a UserBlock
`
const UserBlock = () => (
<UserWrapper>
<User />
</UserWrapper>
);
export default UserBlock;
据我所知,这是在第三方组件上设置样式的方式(在我的应用程序的其他地方也可以使用),它应该尽我所能,但我一无所获。
另外,回到心理模型问题 - 这是你在使用样式组件时应该这样做的方式吗?
感谢您的帮助!
答案 0 :(得分:2)
当您使用styled(X)
包装正常的React组件时,您需要确保附加styled-components
传递的课程。
这意味着对于您的示例,这将解决问题:
const User = (props) => (
<UserName className={props.className}>bla</Username>
);
当您覆盖现有组件的样式styled-components
时,生成一个类,将其注入并将其传递给组件。这意味着如果你没有将课程附加到任何东西,你将永远不会看到这些风格! (有关详细信息,请参阅the documentation)