How to increase css specificity of class attribute passed in Styled Components?

user_10102695 0
Viewed 335

Good day,

I have a styled component named "GridDropDownItem" where i am taking class name through props and it has its own css properties as well.

Styled Component:

const GridDropDownItem = styled.div.attrs<{ class: string }>(props => ({
    className: props.class //here i am taking class name
})) <{ class: string }>`
    width: 180px;
    height: 100px;
    border-radius: 4px;
`;

In Render:

<GridDropDownItem class={itemClass ? itemClass : ''}></GridDropDownItem>

The problem is when I pass itemClass with width and height properties, it is getting overwritten. How can i tackle this situation?

Screenshot: enter image description here

Any suggestion would be appreciated.

styled-components reactjs javascript
1 Answers

The ampersand solution is for overriding styles applied with former classNames or styled applied from the parent and some other cases. It's not meant to be used for overriding inline styles.

/* css */
.header {
  background: #453434; /* overrided */
}
// JSX
<Div className="header sc-wS45d" />

const Div = styled.div`
  && {
    background: white; /* applied */
  }
`
user_123376340
Related