# 样式
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
