react 的样式写法

react 的样式写法

内联样式

const Home3 = function () {
    return (
        //这里第一个大括号表示要插入js语法了，第二个大括号表示对象的括号
        <div style = {{ color: 'red',fontSize: '50px',background: 'green' }}>
            函数式组件
        <div>
    )
}

外部引入

    import ' ./index.css ';
     function Home () {
        return ( <div className = "home-div">//这里给个类名，防止类名冲突，加上文件名
        这里是home </div>
    ) }

第三方库 classname或者classnames都可以,装那个用那个

   // 先安装
    yarn add classname -S
    npm i classnames -S
    
  //然后引入
  import classname from ' classname ';
  
  const add = () =>{
    return (
        <div
            className = {
                classname( {//类名是true就加上这个类名，false就不加
                     index.css中定义的类名  : true,// 如果是true的话可以省略，默认是true
                     index.css中定义的类名  : false
                } )
            }
        >
            使用classname中的类名来控制添加那个样式
        </div>
    )
  }

组件样式，一个组件就是一个样式

//先安装styled-components
    yarn add styled-components -S
    npm i styled-components -S
    
    //引入
    import styled from ' styled-components ';
    import { Fragment } from ' react '
    //这里定义的类名首字母要大写，styled.p  后面是使用了模板字符串,样式不需要引号，正常书写
    const P = styled.p`
        color: red;
        font-size: 50px;
    `
    const Title = styled.div`
        color: green;
        font-size: 50px;
    `
    const add = () {
        return (
           <Fragment>
                 <P>
                这里跟你定义的类名一样，要首字母大写
                </P>
                <Title>
                   这里跟你定义的类名一样，要首字母大写
                </Title>
           </Fragment>
        ) 
    }