React中样式的使用

一、内联样式的方式

   第一种方式： 

        注意：

            1、如果要使用style属性，为JSX语法创建的DOM元素设置样式，不能像网页中那样写，而是要用JS语法来写

            2、外层的{}表示是JS代码；内层的{}是指用JS对象来表示

<div style={{border: "1px solid #ccc",margin: "10px 0",paddingLeft: "15px",display: "flex",justifyContent: "space-between"}}>
    <h1 style={boxStyle}>评论人：{props.user}</h1>
    <h2 style={inlineStyles.boxStyle2}>评论内容：{props.content}</h2>
    <h2 style={cmtItemStyles.boxStyle3}>
        时间：{Y + "年" + M + "月" + D + "日"}
    </h2>
</div>

    第二种方式：

        注意：

            1、在style的样式规则中，如果属性值的单位是px，则可以省略px，直接写一个数值即可

export default function CommentItem(props) {
  const boxStyle = {
    fontSize: 16,
    color: "purple",
  };
  <h1 style={boxStyle}>评论人：{props.user}</h1>
}    

    第三种方式：

        注意：

            1、React中的style都是以对象形式，所以可以对象嵌套

export default function CommentItem(props) {
  const inlineStyles = {
    boxStyle2: {
      fontSize: 14,
      color: "red",
    }
  };
  <h2 style={inlineStyles.boxStyle2}>评论内容：{props.content}</h2>一、内联样式的方式
}

二、外部CSS文件导入的方式

    1、新建css文件

        

    2、在main,js文件中导入

        

    3、在组件中引用

        

三、外部JS对象文件导入的方式

    1、新建JS样式对象文件

      

    2、在组件中引入

      

    3、使用

      

页面展示：