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

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

CSS stylesheetsInline stylingCSS ModulesCSS 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;

结果如下：

---

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