react项目-组件样式

1.默认情况下我们在某个组件中可以直接引入css样式，或者使用内联的style样式：

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

function App() {
  return (
    <div className="content" style={{color:red;background:blue}}></div>
  );
}
export default App;

2.在实际项目中，我们经常会通过条件来动态增加className，此时需要安装官网的插件：

npm insatll classnames --save    // 样式类名插件

import React from 'react';
import './App.css';
import className from 'classnames'  // 引入className,注意它是一个方法
function App() {
  return (
    <div className="content" style={{color:red;background:blue}}>
        <p className={className("class1",{"class2":true, "class3":false})}>动态添加不同的className，使用第三方包classnames</p>
    </div>
  );
}
// p标签默认className是class1，另外两个className根据条件来显示
export default App;

3.有时对于一组件，咱只希望是一个独立的包，没有外部的css样式文件，此时可以使用插件styled-components

npm insatll styled-components --save  

import React from 'react';
import styled from 'styled-components' // 引入styled

const Title = styled.h1`    // 使用字符串模板
    color:#800;
    font-size:30px;
`;
function App() {
  return (
    <div>
        <Title> 样式模板语法 </Title>  // 字体颜色变为红色,大小30像素
    </div>
  );
}
export default App;

4.还有一种JSX样式插件，可以在JSX语法里面写style样式：

npm insatll styled-jsx --save 

之后要在.bablelrc文件中配置，如下：

{
  "plugins": [
        "styled-jsx/babel"
    ]
}

在组件中使用：

import React from 'react';
function App() {
  return (
    <div>
        <p>styled-jsx样式</p>
        <style jsx>
            p{
                color:#800;
                font-size:30px;
            }
        </style>
    </div>
  );
}
export default App
// 在jsx语法里面写样式，如果代码很多的话，会使代码看起来混乱，不推荐使用。