How to create a className from dynamic properties in reactjs - css

Question

Hi i have this myStyle object - but i have to apply class on h1 . How can i convert this myStyle into class.I tried this but its not working. its showing object when i inspect the elements.Height i am calculating dynamically based on the device height
class MyHeader extends React.Component {
deviceHeight=()=>document.height+"px";
render() {
const mystyle = {
height: deviceHeight
backgroundColor: "DodgerBlue", };
return (
<div>
<h1 className={mystyle}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}

Answer 1

you can't do this if you want to apply dynamic css then you can do it like this way. Add below tag in your jsx before the class tag you are trying it will genrate dynamic css in your component code and you can apply it.
<style>
{`\
.mystyle{\
height:${deviceHeight}px;\
background-color:'red'\
}\
`}
</style>

Answer 2

Change className to style.
Ref: https://reactjs.org/docs/dom-elements.html#style

Answer 3

Here you are not giving the dynamic value for height so simple thing is to create one class write CSS for that class and add class to h1 tag
///CSS Code ///
.heading{
height: '20px';
backgroundColor: "DodgerBlue";
}
/// React code
class MyHeader extends React.Component {
render() {
return (
<div>
<h1 className='heading'>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}

Answer 4

try this code: style={mystyle}
if you want inject props to css codes you should use styled-component library: https://styled-components.com/docs/basics#passed-props

Answer 5

To use className to style your property what you can do is create a different css module and put your css stylings there
For example:
Header.css
.header {
height: 100vh; //since you're using device height
background: DodgerBlue
}
Now in your component import that css file
import styles from './Header.css';
Next in your h1 tag
<h1 className={styles.header}>Hello Style!</h1>
this way you can use class name for styling.