一、内联样式的方式
第一种方式:
注意:
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、使用
页面展示: