Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Conditional style

See original GitHub issue

Hi guys, I was wondering if it is possible to handle conditional styles based on whether a prop exists or not? I’ve done it before in styled-components using the below:

${(props) =>
  props.$padding &&
      padding-left: 1rem;
      padding-right: 1rem;

so if the padding prop exists the css will be applied, if not it will be ignored. Hope you can help!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

Adam-Colliercommented, Nov 11, 2021

Perfect! Thats working great 👍 I appreciate you taking the time to sort this and so quickly too! Yeahhhh “blah” was probably not the best choice but it got the point across 😅

cristianbotecommented, Nov 11, 2021

Just updated with the new version and it seem to be working – except that blah is not a valid padding value 😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

Conditional Styling and Binding - angular - Stack Overflow
Another option for more than one style property: In Template: <div style ...
Read more >
Conditional Styling in React JS - Owlcation
Conditional styling in React JS is an important and widely used method for DOM manipulation and styling based on a state or condition....
Read more >
Conditional styles in Angular templates | by Kelly Williams
The problem: We are looping through an array of data in the template but want to add a conditional style to one of...
Read more >
Use conditional formatting to highlight information
Conditional formatting can help make patterns and trends in your data more apparent. To use it, you create rules that determine the format...
Read more >
How To Apply Conditional Styles to Angular Components
Do you need to apply dynamic styles to a HTML element in your Angular applications? Learn with our Angular tutorial now.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found