zoukankan      html  css  js  c++  java
  • react 样式继承 属性传递

    # 样式

    import styled from 'styled-components'

    const Button = styled.button`

      font-size: 20px;

      border: 1px solid red;

      border-radius: 3px;

    `;

    // 一个继承 Button 的新组件, 重载了一部分样式

    const Button2 = styled(Button)`

      color: blue;

      border-color: yellow;

    `;

    export {

      Button,

      Button2

    }

     

    # 显示

    import React, { Component } from 'react'

    import {

      Button,

      Button2

    } from './Styles'

    class App extends Component {

      render() {

        return (

          <div>

            <Button>我是一个按钮1</Button>

            <Button2>我是一个按钮2</Button2>

          </div >

        );

      }

    }

    export default App

     属性传递

    # 样式

    import styled from 'styled-components'

    const Input = styled.input`

      color: ${props => props.inputColor || "blue"};

      border-radius: 3px;

    `;

    export {

      Input

    }

     

    # 显示

    import React, { Component } from 'react'

    import {

      Input

    } from './Styles'

    class App extends Component {

      render() {

        return (

          <div>

            <Input defaultValue="你好" inputColor="red"></Input>

          </div >

        );

      }

    }

    export default App

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    javascript简繁转换函数
    在嵌套的repeater中加ItemDataBound事件
    asp.net url重写方法和步骤
    打开,另存为,属性,打印"等14个JS代码
    php中global的用法
    ini_get
    PHP学习笔记
    PHP isset()与empty()的使用区别详解
    PHP符号说明
    html禁止清除input文本输入缓存
  • 原文地址:https://www.cnblogs.com/ht955/p/14922889.html
Copyright © 2011-2022 走看看