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对象）这样导入会更加方便。