Using Material-UI(React) Button with CSS, "select all immediate children" doesn't seem to work

Question

Given HTML :

<div className="button-container">
  <Button variant="contained">
        Default
  </Button>
  <Button variant="contained" color="primary">
        Primary
  </Button>
  <Button variant="contained" color="secondary">
        Secondary
  </Button>
</div>

I tried to apply a margin to all immediate children of button-container. But that didn't work.

.button-container > *{
    margin: 8px;
}

But this worked.

.button-container > Button{
    margin: 8px;
}

Is this problem with my syntax or compatibility issue when using JSX/React?

i think it has to do with how "generic" the selector is. if you put `!important` at your * selector, does it work? — Apostolos, Jul 28 '20 at 17:00
You should avoid `!important` as much as possible, and instead make your selector more specific _if_ that is what's needed. css-tricks has a good article about _[When Using !important is The Right Choice](https://css-tricks.com/when-using-important-is-the-right-choice/)_ — Stephen P, Jul 28 '20 at 17:03
of course it should be avoided, i just wanted to make sure that this was the case :) — Apostolos, Jul 28 '20 at 17:05
@Apostolos Wow that fixed it! Would you mind posting it as answer so that I can select it? — legokangpalla, Jul 28 '20 at 17:08
@Apostolos — too many people see a comment like that, don't notice the caveat, and take it as the final solution, so I often comment ... and as I typed this the OP comments "can you post that as answer?" :facepalm: — Stephen P, Jul 28 '20 at 17:09
@StephenP i would post a "correct" answer, as I did, but i wanted to make sure that this was the case :) — Apostolos, Jul 28 '20 at 17:11
[CSS !important: Don’t Use It. Do This Instead](https://uxengineer.com/css-specificity-avoid-important-css/) "Though the option is available at our disposal, most experts consider the use of the !important declaration (or !important tag) as an anti-pattern." @legokangpalla -- I could go on all day citing articles about why not to use !important. Also see Apostolos new answer. — Stephen P, Jul 28 '20 at 17:12

Abhishek Bhagate · Answer 1 · 2020-07-28T17:22:38.287

.button-container > *{
    margin: 8px;
}

The above code selects all the children of button-container class. So, it will select all the buttons and apply the given CSS.

.button-container > Button{
    margin: 8px;
}

The above code selects all the children of button-container class that have tag name as Button.

In either case, the output should apply the CSS as expected. In the first case, it might probably have something to do with selector specificity. Maybe try using !important and see if it works. Check out the codesandbox link below -

Another way to do it without using !important (which should be avoided as much as possible- read more here ) would be by begin more specific in you CSS selector. For eg. if you have the root div element with id - #root, you could mention the CSS as -

#root .button-container > * {
  margin: 30px;
}

In, your case, you CSS is probably getting overridden by another selector. By begin more specific, you increase the specificity of your selector which increases its precedence over other. You can learn more on how CSS specificity works here

Ah I meant the generic * version didn't work, but when I specified Button, it worked. Edited the question to be more clear. It's Button component from material-ui. — legokangpalla, Jul 28 '20 at 16:59
@legokangpalla I am sure that the first one should work as expected. I was expecting the second one not to work though. But it does. I have edited the answer and given the codesandbox link where margin with `*` works. — Abhishek Bhagate, Jul 28 '20 at 17:14

score 1 · Accepted Answer · answered Jul 28 '20 at 17:10

Your selector is too "generic" so it is overriden by another selector. One quick (and dirty) way to fix it is by using !important but in general it is a good practice to avoid it.

Check this link for intstructions regarding !important as Stephen P posted in his comment.

Using Material-UI(React) Button with CSS, "select all immediate children" doesn't seem to work

2 Answers2