Menu
I am using inline style for react component. They can be defined as below.
const style= {
position: 'absolute',
left: 0,
right: 0,
bottom: '7.5%',
top: '5.2rem',
overflowY: 'auto',
},
It has some gramma different with css, like 'overflow-y' in css should be set as overflowY in inline style. Now I wander how to set this style -webkit-overflow-scrolling as inline style in react? I have tried below settings but none of them work.
WebkitOverflowScrolling: 'touch',
'-webkit-overflow-scrolling': 'touch',
248
Setting Inline Styles in a React ComponentSpecify the style object inside the constructor as follows. Notice here that the text-align CSS property got camel-cased to textAlign . Pass this styles object to the <H1 /> component, as shown below. Combine multiple style objects using the spread operator.
In React, inline styles are not specified as a string. The style attribute accepts a JavaScript object with camelCased properties. Below are the basic steps for defining inline CSS: 1. Change the CSS property name to its camelCase version like "background-color" to "backgroundColor", "font-size" to "fontSize", etc.
To change the style of an element on click in React:Set the onClick prop on the element. When the element is clicked, set the active state. Use a ternary operator to conditionally set the new styles based on the state variable.
I've used this successfully:
overflowScrolling: "touch",
WebkitOverflowScrolling: "touch",
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
