React系列学习笔记5 --- 组件样式

目录

1、引入样式

2、内联样式

3、样式对象

4、多组件共享style对象


       需要注意的时,组件名内不能使用style样式,例如:<Test style={{color:blue,font-size:24}} />。

1、引入样式

//CSS样式
.blue{
    color:blue;
}

//JS代码
function SayHello(props) {
    return <h3 className=”blue” >Hello, {props.name}</h3>;
    //或者className={styleObj}
}

2、内联样式

       React通过JSX去渲染组件,所以样式语句必须被放在花括号中。这里的第一对大括号正是将JS表达式放入JSX解析。而里面的那对大括号则创建了一个style对象实例,所以在这里style是作为一个对象传入组件。

function SayHello(props) {
  return <h3 style={{color:"blue"}} >Hello, {props.name}</h3>;
}

3、样式对象

       内联样式通常会使得代码非常复杂、可读性差且难以复用。而Reac是将style作为一个对象传入组件的,所以我们完全可以创建一个style对象,然后将它传入组件中。

var styleComponent = {
  fontSize:24,
  color:"blue",
  extAlign:"center"
}
function SayHello(props) {
  return <h3 style={styleComponent}>Hello, {props.name}</h3>;
}

       在这里我们需要注意的是,React中的style是一个对象,所以属性之间是用逗号分隔的。另外,因为这是JS对象属性,所以属性使用驼峰命名,而不是用横线,例如上面代码中的fontSize在css中是font-size但是在React中却并不能这样写,所以这点要记住。

4、多组件共享style对象

       style对象与组件不需要放在用个文件,我们可以为它们创建各自分离的js文件,将style对象所在的文件抽离成模块,再在需要它们的组件文件中引入并使用。由此可以提高代码的复用率和可维护性。

       首先我们创建一个单独的js文件 style.js 

const red = {
  color:"red",
  fontSize:16
}
const green = {
  color:"green",
  fontSize:18
}
const blue = {
  color:"blue",
  fontSize:20
}

const styles = {
    red:red,
    green:green,
    blue:blue
}

        我们可以将所有style对象单独输出(export),如果这么做,也意味着你在使用的时候,也需要把每一个对象分别引入(import)进来,当style对象很多的时候,将会变得十分繁琐。

       所以我们可以将整个style文件作为一个对象输出,通过一个对象(例如上述代码的styles对象)这样导入会更加方便。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值