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