3

我遇到了样式化组件的问题,我不确定这是否是技术限制,或者我如何使用它们的心理模型是错误的。

在这个例子中(我只是在 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;

据我所知,这是在第三方组件上设置样式的方法(并且可以在我的应用程序的其他地方使用),据我所知,它应该可以工作,但我什么也没得到。

另外,回到心智模型问题——当你使用样式化组件时,你应该这样做吗?

谢谢你的帮助!

4

1 回答 1

2

当你包装一个普通的 React 组件时,styled(X)你需要确保附加styled-components传入的类。

这意味着对于您的示例,这将解决问题:

const User = (props) => (
  <UserName className={props.className}>bla</Username>
);

当您覆盖现有组件的样式时,styled-components会继续生成一个类,将其注入并将其传递给组件。这意味着如果你不将类附加到任何东西上,你将永远看不到样式!(有关更多信息,请参阅文档)

于 2017-03-31T11:45:53.240 回答