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 issueHi 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 &&
css`
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:
- Created 2 years ago
- Comments:8 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 😅
Just updated with the new version https://codesandbox.io/s/sad-fog-nnqcb?file=/src/App.js and it seem to be working – except that
blahis not a valid padding value 😄