react基本样式写法

样式写法

内联写法

<div id="root"><div>
<script>
const usernamelist={
  girl:'caicai',
  boy:'will'
};
function printUserName(usernamelist){
  return '男生:'+ usernamelist.boy+'女生:'+usernamelist.girl
};
var elementdom=(
    //内联写法
   <p  style={{color:'red'}}>噢耶，{printUserName(usernamelist)}</p>
);
 ReactDOM.render(elementdom,document.getElementById('root'));
</script>

变量写法

<div id="root"><div>
<script>

const usernamelist={
  girl:'caicai',
  boy:'will'
};
function printUserName(usernamelist){
  return '男生:'+ usernamelist.boy+'女生:'+usernamelist.girl
};
//变量写法
const elementdomStyle={
      color:'red',
    fontSize:'50px'
}
const elementdom=(
   <p  style={elementdomStyle}>噢耶，{printUserName(usernamelist)}</p>
);
 ReactDOM.render(elementdom,document.getElementById('root'));
</script>