学习React(17) - 样式和基本的CSS (Styling and CSS basics)

在React中，有几种形式可以表示CSS在React中.

1. CSS stylesheets
2. Inline styling
3. CSS Modules
4. CSS in JS Libraries (Styled Components)

---

现在先介绍 stylesheets
在src文件夹下创建两个文件，一个叫Stylesheet.js 文件，另一个叫做myStyle.css文件。
先是Stylesheet.js文件代码：

//Stylesheet.js
import React from 'react'
// 调用css文件
import './myStyles.css'

function Stylesheet() {
    return (
        <div>
            <h1 className='primary'>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

大家或许看到了在Stylesheet.js文件里，在className那里有一个css class，在myStyle.css文件下，怎么写呢：

// myStyle.css
.primary{
    color: orange;
}

在App.js文件下：

// App.js 文件
import React from 'react';
import './App.css';
import Stylesheet from './Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet/>
    </div>
  );
}

export default App;

那么结果如何呢？

或许有人会想了，还有没有其他种方法来做css 呢，而且还是使用stylesheet的方法呢？答案肯定是有的。
在App.js 文件里，添加一个属性：

// App.js 文件
import React from 'react';
import './App.css';
import Stylesheet from './Stylesheet';

function App() {
  return (
    <div className="App">
      // 里面的属性值可以换成false的
      <Stylesheet primary={true}/>
    </div>
  );
}

export default App;

在Stylesheet.js 文件里:

// Stylesheet.js 文件
// 使用了props的技巧
import React from 'react'
import './myStyles.css'

function Stylesheet(props) {
    let className = props.primary ? 'primary' : ''
    return (
        <div>
            <h1 className={className}>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

结果如下：(这是primary={true})

这是 primary={false}的结果:

或许有人会问，在css文件里想弄多个css样式，应该怎么做呢？
在myStyle.css文件中：

// myStyle.css
.primary{
    color: orange;
}

.font-xl{
    font-size: 72px;
}

在Stylesheet.js 文件中：

// Stylesheet.js 文件
import React from 'react'
import './myStyles.css'

function Stylesheet(props) {
    let className = props.primary ? 'primary' : ''
    return (
        <div>
            // 不是使用单引号，是按esc左下面的按钮
            <h1 className={`${className} font-xl`}>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

结果如何：

---

还可以这么做，博主觉得下面的方法更容易理解。

// Stylesheet.js 文件
import React from 'react'
import './myStyles.css'

function Stylesheet(props) {
    return (
        <div>
            <h1 className='primary font-xl'>Stylesheet</h1>
        </div>
    )
}

export default Stylesheet

myStyles.css文件还是保持一样的。

// myStyle.css
.primary{
    color: orange;
}

.font-xl{
    font-size: 72px;
}

在App.js文件中：

// App.js 文件
import React from 'react';
import './App.css';
import Stylesheet from './Stylesheet';

function App() {
  return (
    <div className="App">
      <Stylesheet/>
    </div>
  );
}

export default App;

结果还是一样：

---

下面是介绍Inline Styling方法
在src文件夹下面创建一个文件，名叫Inline.js文件

// Inline.js
import React from 'react'

const heading = {
    fontSize: '72px',
    color: 'blue'
}

function Inline() {
    return (
        <div>
            <h1 style={heading}>Inline</h1>
        </div>
    )
}

export default Inline

在App.js文件中，

// App.js 文件
import React from 'react';
import './App.css';
import Inline from './Inline';

function App() {
  return (
    <div className="App">
      <Inline/>
    </div>
  );
}

export default App;

结果如下：

博主觉得这个方法能直接能在同一个文件下找到所对应的css属性，但是觉得一旦做到大项目的时候，文件就非常多，这时候就得分档来进行。

---

下面来说一下CSS Modules。
得创建一个名为appStyles.module.css文件：

// appStyles.module.css 文件
.success{
    color: green
}

还有一个名为appStyles.css文件：

.error{
    color: red
}

在App.js文件中：

// App.js 文件

import React from 'react';
import './App.css';

import './appStyles.css'
import styles from './appStyles.module.css'

function App() {
  return (
    <div className="App">
      <h1 className="error">Error</h1>
      <h1 className={styles.success}>Success</h1>
    </div>
  );
}

export default App;

结果如下：

---

如果觉得不错的话，就麻烦用点赞来代替五星好评吧！