有什么方法可以设计嵌套组件的样式吗

Question

这是我的代码。

/*Default Styled Component*/
import styled from "styled-components";
export const MenuWrapper = styled.ul`
border: 1px solid blue;
`
export const MenuList = styled.li`
color: blue;
`
export const Menu = (
<MenuWrapper>
<MenuList>1</MenuList>
<MenuList>2</MenuList>
<MenuList>3</MenuList>
</MenuWrapper>
);


/* This is where I tried to restyle */
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;
}

我想做的是创建一个默认样式的组件，其中包含多个元素，并根据我的需求重新设置样式，方法是使用"styleed(Menu("并添加${MenuWrapper}${MenulList}作为嵌套元素的选择器，但它们似乎都不起作用。。。有人能帮忙吗。。？提前谢谢。。。

Answer 1

我在这里看到了几个问题，但首先，问题似乎是由您没有将className道具附加到Menu内部的事实引起的。

请参阅https://styled-components.com/docs/basics#styling-任何组件和此Codesandbox：https://codesandbox.io/s/sweet-carlos-vt165s