我遇到了样式化组件的问题,我不确定这是否是技术限制,或者我如何使用它们的心理模型是错误的。
在这个例子中(我只是在 Codepen 中快速编写,所以忽略拼写错误)我有一个组件是跨度中的用户名。我希望能够在任何地方使用该组件,因此它的样式非常小:
// 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;
我希望能够在不同的组件中使用这个跨度,但在这种情况下,我希望它的样式在这种情况下被覆盖:
// 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;
据我所知,这是在第三方组件上设置样式的方法(并且可以在我的应用程序的其他地方使用),据我所知,它应该可以工作,但我什么也没得到。
另外,回到心智模型问题——当你使用样式化组件时,你应该这样做吗?
谢谢你的帮助!