React学习笔记003-内外联样式

    React中设置组件样式一共有两种方式，一种是直接写在组件style属性上的内联样式，另外一种是在组件外定义的外联样式。

  内联样式

  比较简单，就是将一个css键值对对象赋值给组件的style属性。注意两点，一个是css属性名的写法是js中css属性写法(background-color -> backgroundColor)；二是双大括号，因为这里相当于使用到一个变量，外层大括号相当于jsx语法。

      {/**1.内联样式 */}
      <div
        style={{ width: "100px", height: "100px", backgroundColor: "red" }}
      ></div>

等价于:

  const inLineStyle = { width: "100px", height: "100px", backgroundColor: "red" };
  return (
    <div>
      {/**1.内联样式 */}
      <div
        style={inLineStyle}
      ></div>
    </div>
  );

效果:

这种用得不多，设置简单一两条属性还行，多了就影响jsx代码段的观感，临时用用。

另外，内联样式不支持伪类和媒体查询，请使用第三方包如radium以支持。

  外联样式 

1.最常用的，全局引入css样式文件:

新建同级目录下.css文件

.out-line-box {
    width: 100px;
    height: 100px;
    background-color: hotpink;
}

 注意引入css

import "./App.css";

function App() {
  return (
    <div>
      {/**2.外联样式 */}
      <div className="out-line-box"></div>
    </div>
  );
}

export default App;

效果:

 这种用得最多，实际工作中，很可能使用到这种的变体，也就是引入scss和less文件，这个大同小异。

2.组件级别引入

如果想控制样式在组件级别，可以这样做:

 样式文件名字中间价module，内容不变(变量名貌似不支持-，我改成了下划线_)，引入方式变成:

.out_line_box {
    width: 100px;
    height: 100px;
    background-color: hotpink;
}

import style from "./App.module.css";

function App() {
  return (
    <div>
      {/**2.外联样式(组件级别) */}
      <div className={style.out_line_box}></div>
    </div>
  );
}

export default App;

查看元素，发现className变了，加了前后缀:

 3.使用styled-components组件

先npm install安装一下

npm i styled-components -S

然后引入，创建:

import styled from "styled-components";

// 自定义标签(首字母大写)
const SectionDiv = styled.div`
  width: 100px;
  height: 100px;
  background-color: hotpink;
`;

function App() {
  return (
    <div>
      {/**2.外联样式(使用styled-components, 可在js中直接写样式创造复合样式的组件) */}
      <SectionDiv />
    </div>
  );
}

export default App;

如果想给这个自定义组件加额外的属性(比如class)，可以这样做:

const SectionDiv = styled.div.attrs({
  className: "box1 box2",
})`
  width: 100px;
  height: 100px;
  background-color: hotpink;
`;

如果想把所有东西(CSS-IN-JS)都集成到js中，这个方式可以考虑一哈。