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、使用

      

頁面展示：