react添加样式

115 阅读1分钟
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>02添加样式</title>  
<script src="../node_modules/react/umd/react.development.js"></script>  
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  
  
<style>  
/* 通过类添加样式,类名必须通过className定义 */  
.add{  
color:cadetblue;  
}  
/* 通过ID添加样式 */  
#delete{  
color:yellowgreen;  
}  
</style>  
</head>  
<body>  
<div id="root1"></div>  
<script type="text/babel">  
// 通过定义变量添加样式,标准做法  
const styleobj ={  
fontSize: "15px",  
border:"5px"  
}  
function MyButton(){  
return (<div>  
<button className="add">新增</button>  
{/* 添加内联样式*/}  
<button style={{color:"red",fontSize:"15px"}}>修改</button>  
<button id="delete" style={styleobj}>删除</button>  
</div>)  
}  
ReactDOM.render(<MyButton/>,document.getElementById("root1"))  
</script>  
  
  
  
</body>  
</html>