react添加样式

最新推荐文章于 2024-06-14 15:02:13 发布

渭东流

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量82

点赞数

文章标签： javascript 开发语言 ecmascript react

本文链接：https://blog.csdn.net/wedongliu/article/details/131386654

版权

<!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>