Be specific in styled components with `&`
`input[type="number"]` has styles applied at a global level. I want to override some of those styles
> a more specific selector takes precedence over a less specific one
So if I just define some css that is:
``` css
.myCoolInput {
background-color: green;
}
```
It won't override the more specific `input[type="number"]` selector's `background-color: pink`.
So this styled component I have is wrong.
``` jsx
const GreenInput = styled.input`
background-color: green;
`
render (
);
```
I need to use the `&` and move the className attribute to get more specificity for my style.
``` jsx
const GreenInput = styled(NumberInput)`
input& {
background-color: green;
}
`
```
This outputs:
``` css
input. {
background-color: green;
}
```
This selector has the same specificity as `input[type="number"]` but is declared later, so takes precedence.
chriserin
July 27, 2018