css 调整Fluent UI的命令栏按钮

nnt7mjpx 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(134)

我想稍微调整一下Fluent UI的CommandBarButton。我想通过在图标顶部添加填充来将图标向下移动一点。我尝试在DevTools中的.icon-112内部添加padding: 1px 0px 0px 0px。它非常完美。

所以我在CSS中添加了以下内容：

.move .ms-Button-Icon {
  padding: 10px 0px 0px 0px; /* 10px to make it obvious */
}

并在中使用move

<CommandBarButton
  className="move"
  iconProps={{ iconName: "Comment" }}
  text="Comment"
/>

但它不起作用;我们没有看到多余的填充物。有人知道为什么吗？
https://codesandbox.io/s/dreamy-glade-qu8g29?file=/src/App.js:200-314

1条答案

.move .ms-Button-icon {
  padding: 10px 0px 0px 0px; /* 10px to make it obvious */
}

是.ms-Button-icon不是.ms-Button-Icon哈哈