CODEWITHSUNDEEP
csscss-selectorsfluent-uifluentui-react
SoftTimur
SoftTimur

Reputation: 5510

Adjust CommandBarButton of Fluent UI

I would like to adjust a little bit CommandBarButton of Fluent UI. I want to move the icon a little down by adding a padding on top of it. I try to add padding: 1px 0px 0px 0px inside .icon-112 in DevTools. It is perfect.

enter image description here

So I add the following in CSS:

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

And use move in

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

But it does not work; we don't see the extra padding anywhere. Does anyone know why?

https://codesandbox.io/s/dreamy-glade-qu8g29?file=/src/App.js:200-314

Upvotes: 0

Views: 983

Answers (2)

alex3683
alex3683

Reputation: 1565

Just as an alternative, this is the CSS-in-JS way preferred by Fluent UI, without using the classnames directly:

<CommandBarButton
  iconProps={{ iconName: "Comment" }}
  text="Comment"
  styles={{ icon: { paddingTop: 10 } }}
/>

Adjusted sandbox here: https://codesandbox.io/s/modern-sunset-6ijgqf?file=/src/App.js

Upvotes: 1

lopm46
lopm46

Reputation: 495

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

It's .ms-Button-icon not .ms-Button-Icon lol

Upvotes: 1

Related Questions