React组件样式

React函数式组件

函数式组件 （ 无状态 组件 ） PureComponent

• 函数式组件是一个纯函数，函数中接收一个参数叫做props,
• 单是单纯的返回一段jsx
• 这个组件中不书写逻辑（ 比如事件 ）

React 函数式组件的写法

jsx要求根元素唯一

import React from 'react'//必须引入
import './index.css'

function Home () {
  return (
    <div className = "home-box">//只能唯一根元素
      <p> home </p>
    </div>
  )
}

export default Home

然后在App.js中引入Home组件

import React from 'react';

import Home from './components/home'

// 函数式组件
function App() {
  return (
    <div className="App">
      <Home></Home>
    </div>
  );
}

export default App;

类组件

import react,{Component,Framgent} from 'react';

class StyleComponent extends Component {
    render () {
        return (
            <div>
                <p style={{width: '200px', color: 'red', height: '200px'}}>一二三</p>
            </div>
        )
    }
}

export default StyleComponent

然后在App.js中引StyleComponent组件

import React from 'react';


import StyleComponent from './components/style_component/index';

// 函数式组件
function App() {
  return (
    <div className="App">
      <StyleComponent></StyleComponent>
    </div>
  );
}

export default App;

组件中样式的添加

方法一：行内样式

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如render函数里、组件原型上、外链js文件中

方法二：使用class

import react,{Component,Framgent} from 'react';

class StyleComponent extends Component {
    styleBox = {width: '50px',height: '50px',background: 'red'}
    render () {
        const styleObj = {width: '50px',height: '50px',background: 'red'}//类中实例属通过this调用
        return (
            <div>
                <p style={{width: '200px', color: 'red', height: '200px'}}>一二三</p>
                <p style = { styleObj }> 行内样式 </p>
                <p style = { this.styleBox }> 类中实例属性 </p>
            </div>
        )
    }
}

方法三：第三包classname

安装：yarn add classnames

.content {
  width: 100px;
  height: 100px;
  background: yellow;
}

//引入classnames包在render函数中
const classnames = classnames({
     // 类名： 布尔值
     content: false
})
return (
    <p className = { names }> classnames </p>//通过布尔值来控制是否添加content
)

方法四：安装第三方包css-in-js在js中写css样式

安装：yarn add styled-components

import React ,{ Component } from 'react'
import './index.css'
import classnames from 'classnames'
import styled from 'styled-components'

const Container = styled.p`
  width: 200px;
  height: 200px;
  background: purple;
  color: white;
`
const Row = styled.span`
  color: white;
  font-size: 20px;
  font-weight: bold;
`
class StyleComponent extends Component{
  render () {
    return (
      <div>
        <Container> 
          <Row> 这里是样式组件 </Row>  
        </Container>
      </div>
    )
  }
}

export default StyleComponent

到时候Container会解析成p标签，Row解析成span标签