0

I am using a Button from the fluent UI library for my application. And I want to set the background color of this button to be white.

I tried setting the background color to any other color and it works, but when it is set to white, it seems like it becomes transparent. Does anyone know how to accomplish this?

CSS file for when the Button is styled red.

test: {
    backgroundColor: "red",
    marginTop: "30px",
    height: "100%",
    width: "50%",
  },

enter image description here

CSS file for when the Button background is set to white

test: {
    backgroundColor: "white",
    marginTop: "30px",
    height: "100%",
    width: "50%",
  },

enter image description here

HackerMan33453
  • 69
  • 1
  • 6
  • There appears to be a gradient on the red button. The leftmost part of the white button appears to be white... is it the gradient that makes you think it's transparent? – JDB May 10 '23 at 17:48
  • The background of the body is gradient. So I believe it is displaying the background through the button – HackerMan33453 May 10 '23 at 17:52
  • Again... is it possible that, instead of transparent, you are actually looking at a gradient white? Try changing the background of the page to green and see if your button is green or white. – JDB May 10 '23 at 18:11
  • I have already tried that. It changes based on the background color, thus it is transparent – HackerMan33453 May 10 '23 at 18:20
  • 1
    Doesn't Fluent UI use "[design tokens](https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/design-tokens)"? Is `white` a valid design token in your theme? Perhaps you've defined `red` (or it was already defined for you), but not `white`? Try other CSS color names, like `aquamarine` and `goldenrod`, and see what happens. I bet they'll also result in transparent. Or, if `white` is a default, has it been overridden somehow to transparent? – JDB May 10 '23 at 18:37
  • They both show up but I see there is a gradient. So that means there must be some opacity built into the fluent Ui button? I also tried doing opacity:1 but didn't do anything – HackerMan33453 May 10 '23 at 18:52

1 Answers1

-1

I am not fully on top of fluent UI in fairness, but it might be a default behaviour of the "white" colour? I mean have you tried to set a HEX of the colour instead? I mean #fff?

Jakub Strzadala
  • 163
  • 4