关于多级菜单的样式嵌套问题

Question

老师您好，目前组件实现了一个二层菜单的组件，但是假如我需要在 中继续嵌套 的话，样式也需要跟着一起嵌套下去。这样操作的话不是很灵活，请问老师有没有一些解决方案或者思路可以供我参考呢？

Answer 1

张轩 2022-12-23 09:35:52

同学你好 

请问是否能提供一下你这个菜单的样式截图 以及你现在样式的实现方案的简单代码呢？我看了以后可以更好的对症下药

• 提问者 Neolu4ever #1

  老师您好，我在component 的目录下增加了一个 TreeTestMenu 的文件夹，里面是我参照 antd 的进一步改造。
  
  目前遇到的问题在还原样式上：课程代码的样式只涉及到有限的嵌套（1-2层），但是使用时菜单的嵌套可能会更多。
  
  我的第一个问题是，这时样式的代码要如何跟进呢？scss 的嵌套写法无法根据数据自行更新。
  
  另外一个问题在于一个具体的样式实现：antd 的菜单父子选项选中都是同一个效果（同样的宽高和背景颜色）。我通过将 ul 标签设置 padding 为0，且width 为100%，勉强实现了，但是却无法对下面的选项的缩进进行设置。具体的请看代码。截图我会放在另一个回复里。