美文网首页
React 使用样式

React 使用样式

作者: kevin5979 | 来源:发表于2020-11-03 10:54 被阅读0次

    在React中使用样式

    • 内联样式的写法
    <h2 style={{fontSize: "20px"}}>我是标题</h2>
    
    • 普通的css写法
    // 注意: 这种样式属于全局样式,样式之间会相互层叠
    import './App.css';
    <h2 className="title">我是标题</h2>
    
    • css modules
    /**
     * 生成样式的class名唯一
     * React的脚手架已经内置了css modules的配置
     * 需要将 .css/.scss 等样式文件都修改成 .module.css/.module.scss
     */
    import styles from "./App.module.css"
    <h2 className={styles.title}>我是标题</h2>
    
    • css in js (使用 styled-components 库)
      建议编译器安装相关代码提示插件,编写样式会更快
      安装:yarn add styled-components
    import styled from "styled-components"
    
    // 将 CssTestWrapper 标签替换成div标签
    const CssTestWrapper = styled.div`
      color: red;
      h2{
        color:blue
      }
      // 支持类似scss的嵌套写法
      ul{
        border: 2px solid black;
        margin: 0;
        padding: 0;
        li{
        list-style: none;
          background:yellow;
          color: blueviolet;
        }
        // 支持伪类选择器
        li:hover{
          font-size: 60px;
        }
      }
      .input{
        width: 200px;
        height: 30px;
        // 获取props
        border: 10px solid ${props => props.inputBorder};
      }
    `
    // 添加 attrs属性
    const OInput = styled.input.attrs({
      type:"password",
      placeholder:"请输入密码"
    })`
    border-bottom: 2px solid #ff5757;
    padding: 0 20px;
    `
    
    // 样式继承 OInput2 继承 OInput的全部样式
    const OInput2 = styled(OInput)`
    color: #ff5757;
    `
    
    render() {
        return (
          <CssTestWrapper inputBorder="#f00">
            <h2>我是标题</h2>
            <div>我是内容</div>
            <ul>
              <li>我是列表1</li>
              <li>我是列表2</li>
            </ul>
            <input className='input'}></input>
            <br/>
            <OInput />
            <OInput2 />
    
          </CssTestWrapper>
        )
      }
    

    classnames库

    • 用于动态添加类名的一个库
      安装:yarn add classnames
    import cn from "classnames"
    // 使用
    <input className={cn('input')}></input>
    
    /**
     classNames('foo', { bar: true }); // => 'foo bar'
     classNames({ foo: true }, { bar: true }); // => 'foo bar'
     classNames({ foo: true, bar: true }); // => 'foo bar'
     classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
     */
    
    END

    相关文章

      网友评论

          本文标题:React 使用样式

          本文链接:https://www.haomeiwen.com/subject/mwyxkktx.html