react怎么添加css样式

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

3、引入样式：引入外部的css文件，外部的css文件就是普通的css，在组件js中的import语句后面使用如下语句。

引入样式就是将CSS文件写下外部，在引入使用，这种普通的引入样式实际上会有一定的问题，我们先看用法，再分析问题

用法：

css 文件

1

2

3

4

5

6

7

8

.person{

    width: 60%;

    margin:16px auto;

    border: 1px solid #eee;

    box-shadow: 0 2px 3px #ccc;

    padding:16px;

    text-align: center;

}

js文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import React from 'react';

import './Person.css';

class App extends React.Component {

  

  //.... 

  

  render() {

  

    return (

      <div className='person'>

        <p>person:Hello world</p>

      </div>

    )

  }

}

  

export default App;

结果展示：

1.png

问题：

因为CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。

更多编程相关知识，请访问：编程教学！！

以上就是react怎么添加css样式的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

js如何改变css样式

xml文档不能使用css样式表怎么办

redux如何关联React？

React组件有哪些阶段

React如何提高首屏加载速度

React中什么叫子组件

React中有实现截图插件吗

web前端React是什么？

React中如何引入样式

React开发框架有哪些？

更多相关阅读请进入《React》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...