Show pageBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Dynamic Inline Styling ====== It is possible that we dynamically change the CSS with inline styling. As we know that the styling is just an JavaScript object, we can change it before we render it. Here is a dumb example that change ''style.cursor = "pointer";''. Ideally the if condition could be related to property of the props or state. <code> let style = { borderWidth: '1px', borderStyle: 'solid', cursor: 'default' }; let bUsingCursorPointer = true; if (bUsingCursorPointer) { style.cursor = "pointer"; } </code> Full code: <code> const ItemComponent = (prop) => { let style = { borderWidth: '1px', borderStyle: 'solid', cursor: 'default' }; let bUsingCursorPointer = true; if (bUsingCursorPointer) { style.cursor = "pointer"; } return ( <div> <span style={style} key={prop.index} onClick={prop.clickHandler}> name: {prop.name}, price: ${prop.price}, key: {prop.index}</span> </div> ); }; </code> reject/dynamic_inline_style.txt Last modified: 2020/07/14 10:13by chongtin