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 FreeTop 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
Top GitHub Comments
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
blah
is not a valid padding value 😄