如何使用styled-components修改React组件内部Wrapper样式？

我有如下组件：

// MyComponent.tsx
export function MyComponent(): React.ReactElement {
  return <Wrapper>
           <Text>
             hello there
           </Text>
           <AnotherText>
             bye bye
           </AnotherText> 
         </Wrapper>
} 

export const Wrapper = styled.div`
  color: #FEB240;
  background: #f5f5f5;
  padding-bottom: 5rem;
  padding-left: 7rem;
  padding-right: 7rem;
  gap: 2rem;
`;

export const Text = styled.span`
  width: 50%;
  cursor: pointer;
  color: rgba(28, 33, 120, 1);
`;

export const AnotherText = styled.span`
  color: red;
`;

我希望能够对Wrapper进行样式设置，尝试了如下写法，但未看到任何样式变化：

// AnotherPlace.tsx
const NewlyStyledMyComponent = styled(MyComponent)`
  ${Wrapper} {
    color: brown;
    background: magenta;
   }
`;

请问该如何正确实现需求？

你的写法不生效的核心原因是：MyComponent是普通React函数组件，并非styled-components生成的组件，无法直接通过嵌套选择器修改内部的Wrapper样式。以下是三种可行的解决方案：

方案一：通过props传递样式覆盖 #

修改MyComponent，允许接收自定义样式props来覆盖默认样式：

// MyComponent.tsx
import { css } from 'styled-components';

export function MyComponent({ wrapperStyles }: { wrapperStyles?: ReturnType<typeof css> }): React.ReactElement {
  return <Wrapper css={wrapperStyles}>
           <Text>hello there</Text>
           <AnotherText>bye bye</AnotherText> 
         </Wrapper>
} 

export const Wrapper = styled.div<{ css?: ReturnType<typeof css> }>`
  color: #FEB240;
  background: #f5f5f5;
  padding-bottom: 5rem;
  padding-left: 7rem;
  padding-right: 7rem;
  gap: 2rem;
  ${props => props.css}
`;

// Text、AnotherText样式保持不变

在AnotherPlace.tsx中使用：

import { css } from 'styled-components';

const customWrapperStyles = css`
  color: brown;
  background: magenta;
`;

<MyComponent wrapperStyles={customWrapperStyles} />

方案二：让组件接收className传递给Wrapper #

修改MyComponent，使其支持接收className并传递给内部的Wrapper：

// MyComponent.tsx
export function MyComponent({ className }: { className?: string }): React.ReactElement {
  return <Wrapper className={className}>
           <Text>hello there</Text>
           <AnotherText>bye bye</AnotherText> 
         </Wrapper>
} 

// Wrapper及其他样式保持不变

在AnotherPlace.tsx中通过styled组件生成新样式：

const NewlyStyledMyComponent = styled(MyComponent)`
  color: brown;
  background: magenta;
`;

// 使用时直接调用
<NewlyStyledMyComponent />

方案三：利用styled-components主题系统 #

如果需要全局或多处复用样式，可以通过主题变量来控制：

1. 定义主题文件：

// theme.ts
export const defaultTheme = {
  wrapper: {
    color: '#FEB240',
    background: '#f5f5f5',
  },
};

2. 修改Wrapper使用主题变量：

// MyComponent.tsx
export const Wrapper = styled.div`
  color: ${props => props.theme.wrapper.color};
  background: ${props => props.theme.wrapper.background};
  padding-bottom: 5rem;
  padding-left: 7rem;
  padding-right: 7rem;
  gap: 2rem;
`;

3. 在使用处覆盖主题：

// AnotherPlace.tsx
import { ThemeProvider } from 'styled-components';

<ThemeProvider theme={{
  wrapper: {
    color: 'brown',
    background: 'magenta',
  },
}}>
  <MyComponent />
</ThemeProvider>

内容的提问来源于stack exchange，提问作者Avba