react怎么添加css样式

添加方法：1、使用“brush:html;toolbar:false">class App extends React.Component { // ... render() { return (

Second Way!

) } }

需要注意的是，这里的css样式名采用驼峰命名法：如font-size →fontSize，并且你需要将CSS属性放在双大括号之间。为什么要用两个大括号？因为在JSX中渲染的JS表达式，它们必须被放在一对大括号里，{style}可以视为一个JS对象。所以第一对大括号正是将JS表达式放入JSX解析，里面的那对大括号则创建了一个style对象实例，所以在这里style是作为一个对象传入组件

2、声明样式：

声明样式其实是行内样式的一种改进写法，在render函数外部创建style对象，然后传递给组件，让css与标签分离，但实际上样式多了的话还是不太美观

class App extends React.Component {
 
//...
 
 const style1={    
      background:&＃39;#eee&＃39;,
      width:&＃39;200px&＃39;,
      height:&＃39;200px&＃39;
    }
 
  const style2={    
      color:&＃39;red&＃39;,
      fontSize:&＃39;40px&＃39;
    }
 
  render() {
    return (
      

        
Second Way!
      
    )
  }
}

注意这里实用的还是驼峰命名法，其次因为已经在外部声明了style对象，所以在JSX中使用的时候只需要一个大括号{//..}

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

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

用法：

css 文件

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

js文件

import React from &＃39;react&＃39;;
import &＃39;./Person.css&＃39;;
class App extends React.Component {
 
  //....  
 
  render() {
 
    return (
      

        
person:Hello world
      
 
    )
  }
}
 
export default App;

结果展示：

问题：

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

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

以上就是react怎么添加css样式的详细内容，更多请关注其它相关文章！