class App extends Component {
constructor() {
super()
this.state = { isRed: true }
}
render() {
const isRed = this.state.isRed
return <p style={{ color: isRed ? 'red' : 'blue' }}>Example Text</p>
}
}// If you need to conditionally apply inline styles (apply all or nothing) then this notation also works:
<div style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}} >
{content}
</div>
// Or to apply it to particular property
<div
style={{
display: isExpanded ? 'block' : 'none',
marginBottom: '1rem'
}}
>
{content}
</div>
style={{ textDecoration: todo.completed && "line-through" }}
style={{ textDecoration: todo.completed ? "line-through" : 'none' }}style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}<ImageBackground source={Images.bg} style={ (navHeight==0) ? styles.bg1 : styles.bg2}>