Utilizing Css Variables in Styled Components for Dynamic Styling

Question

Utilizing Css Variables in Styled Components for Dynamic Styling

I have a particular component that looks like this:

const pretty = styled.div`
  --nth-child: 5n;
  --size: 20px; //css variable
  
  width: var(--size);

  &:nth-child(var(--nth-child)) {
    //...styles...
  }

  @media (max-width: 768px) {
    //overriding
    --size: 12px;
    --nth-child: 3n;
  }
`

The main question I'm facing is how to interpolate the CSS variable in this specific location?

&:nth-child(var(--nth-child)) {
  //...styles...
}

As far as I can tell, it seems impossible, so I'm looking for an alternative solution.

Please note: Using JavaScript variables is not an option in my situation.

Update:

The editor also highlights an error in that section:

https://i.sstatic.net/lb4W5.png

I attempted a workaround by trying this, but unfortunately, it didn't work either:

&:nth-child(${css`var(--nth-child)`}) {
  margin-right: 0;
}

javascript css reactjs styled-components css-variables

Answer 1

Answer №1

Using CSS variables is limited to property declarations only, as they do not work in selectors.

However, there are alternative methods to achieve the desired outcome. If JavaScript variables are not an option and your situation is more complex than the example provided, consider utilizing React props interpolation with styled-components.

&:nth-child(${props => props.nthChildLargeScreen}) {
  //...styles...
}

@media (max-width: 768px) {
  &:nth-child(${props => props.nthChildLargeScreen}) {
    //...reverse styles from above...
  }

  &:nth-child(${props => props.nthChildSmallScreen}) {
    //...styles...
  }
}

Alternatively, consider using global variables:

&:nth-child(${NTH_CHILD_LARGE_SCREEN}) {
  //...styles...
}

...etc

If you can define styled components and CSS variables initially, you should be able to implement one of these alternatives instead.

Answer 2

Using CSS variables is limited to property declarations only, as they do not work in selectors.

However, there are alternative methods to achieve the desired outcome. If JavaScript variables are not an option and your situation is more complex than the example provided, consider utilizing React props interpolation with styled-components.

&:nth-child(${props => props.nthChildLargeScreen}) {
  //...styles...
}

@media (max-width: 768px) {
  &:nth-child(${props => props.nthChildLargeScreen}) {
    //...reverse styles from above...
  }

  &:nth-child(${props => props.nthChildSmallScreen}) {
    //...styles...
  }
}

Alternatively, consider using global variables:

&:nth-child(${NTH_CHILD_LARGE_SCREEN}) {
  //...styles...
}

...etc

If you can define styled components and CSS variables initially, you should be able to implement one of these alternatives instead.

Utilizing Css Variables in Styled Components for Dynamic Styling

Answer №1

Similar questions

Embedding a Material-UI Icon into an Input Field within a React Application

Angular JS Route Hijacking

Getting the Current User in Django and Passing it to React

The Blueimp File Uploader seems to be sending numerous submissions at once

When using React's setState function, it sometimes fails to re-render with the most up-to-date data and instead shows

Switch up the attribute of an SVG element using jQuery

Unable to display background image and color on Internet Explorer

Modify an individual attribute in a local JSON file using a put request in Angular 8

Changing a variable's value to a string in JavaScript

Tips for enhancing your HTML email template with borders:

X-UA-Compatible feature implemented in a corporate intranet specifically designed to work seamlessly with Internet

``"Selecting a location upon clicking a marker in the array

The property 'muiName' is undefined and is throwing an error in the function t.isMuiElement

Modifying hidden field values with JavaScript does not carry over to the server side in Chrome

I am experiencing issues with my websocket connection following the deployment of my application

Unable to modify background color in base website

Creating an animated full-width SVG with a background image

fetching server-side data for dynamic rendering

Visualizing nested data using dynamic line components in Recharts technology

Tips for preventing the use of Observable within another Observable