score:0

Accepted answer

i think it is a typo:

// remove style prop or it will be converted to style={true}
<div classname="col-md-6 offset-md-3">
// use "style" prop instead of "styles"
  <p style={styles.boilerplate}>some boilterplate text</p>
</div>

score:0

you can find a documentation on how to use inline css in react here.

your first choice should be to use the classname to reference classes defined in an external css stylesheet

import react, { component } from 'react';
import './startpage.module.css' //loading a css file here

class startpage extends component {
state = {  }
render() { 
    return ( 
       <div classname="container">
           <div classname="row">    {/*row 1 - contains title*/} 
                <div classname="col-md-6 offset-md-3"> // remove style
                    <p classname='boilerplate'>some boilterplate text</p> // add boilerplate as classname
                </div>
           </div>

           <div classname="row">    {/*row 2 - contains buttons*/} 

           </div>
       </div> 
     );
}
}

export default startpage;

but if you would like to use the style attribute it works like this:

import react, { component } from 'react';


const divstyles = {
    backgroundcolor: '#000000',
    border: 'red dotted'
}

class startpage extends component {
state = {  }
render() { 
    return ( 
       <div classname="container">
           <div classname="row">    {/*row 1 - contains title*/} 
                <div classname="col-md-6 offset-md-3">
                <p style={divstyles}>some boilterplate text</p>
                </div>
           </div>

           <div classname="row">    {/*row 2 - contains buttons*/} 

           </div>
       </div> 
     );
}
}

score:1

you should use styles prop instead of style

<div style classname="col-md-6 offset-md-3">

</div>

or just remove style prop. the value is empty!


Related Query

More Query from same tag