ReactJS 样式组件的上下文样式

Question

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

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

据我所知，这是在第三方组件上设置样式的方法（并且在我的应用程序的其他地方有效），据我所知它应该有效，但我什么也没得到。

此外，回到心智模型问题 - 这是您在使用样式化组件时应该采用的方式吗？

感谢您的帮助！

Answer 1

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

这意味着对于您的示例，这将解决问题：

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

当您覆盖现有组件的样式时 styled-components 继续，生成一个 class，将其注入并将其传递给组件。这意味着如果您不将 class 附加到任何东西上，您将永远看不到样式！（有关详细信息，请参阅 the documentation）

ReactJS 样式组件的上下文样式

Contextual styling of ReactJS styled-components

css

reactjs

styled-components