如何通过styled(Menu)重新样式化嵌套Styled Components组件？

问题根源 #

你定义的Menu是直接返回JSX的表达式，并非可复用的React组件。styled-components的styled()方法只能接收组件（函数/类组件）作为参数，无法直接处理JSX元素，所以你的嵌套样式选择器无法生效。

正确实现步骤 #

1. 将Menu改为函数组件 #

先修改默认组件的定义，把Menu改成可复用的函数组件，这样才能被styled()正确包装：

/* Default Styled Component */
import styled from "styled-components";

export const MenuWrapper = styled.ul`
  border: 1px solid blue;
`;

export const MenuList = styled.li`
  color: blue;
`;

// 改为函数组件，而非直接的JSX表达式
export const Menu = () => (
  <MenuWrapper>
    <MenuList>1</MenuList>
    <MenuList>2</MenuList>
    <MenuList>3</MenuList>
  </MenuWrapper>
);

2. 正确重写嵌套样式 #

现在你可以通过styled(Menu)包装组件，利用styled-components的类名插值特性，结合&符号（指代当前组件的类名）来选中内部的嵌套组件，实现样式覆盖：

/* 重写样式的文件 */
import styled from 'styled-components';
import { Menu, MenuWrapper, MenuList } from '../src/components/Menu.style';

const StyledMenu = styled(Menu)`
  & ${MenuWrapper} {
    border: 1px solid green;
  }
  & ${MenuList} {
    color: green;
  }
`;

原理说明 #

${MenuWrapper}和${MenuList}会被styled-components编译为对应的类选择器，配合&符号（当前StyledMenu的类名），就能精准命中组件内部的嵌套元素，从而覆盖默认样式。

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