父母如何通過樣式組件時尚將重寫樣式規則傳遞給孩子？

Question

我有一個按鈕和一些其他版本的按鈕，想重用按鈕，但重寫了一些特定的規則。像寬度，高度，顏色或懸停狀態顏色等

這是可能的，而不必手動傳遞每一個屬性作爲道具？

這裏是webpackbin http://www.webpackbin.com/VyjrMGJ9f

import React from 'react'; 

import styled from 'styled-components'; 

const Button = styled.button` 
    text-align: center; 
    font: bold 15px helvetica; 
    padding: 10px; 
    border: 0; 
    pointer-events: ${props => props.disabled ? 'none' : 'auto'}; 
    color: ${props => props.disabled ? '#848484' : '#fff'}; 
    background-color: ${props => props.disabled ? '#bebebe' : '#07314d'}; 
    &:hover { 
    background-color: ${props => props.disabled ? '#bebebe' : '#336086'}; 
    } 
` 

const EnhancedButton = styled.button` 
    background-color: ${props => props.disabled ? '#bebebe' : '#ec4800'}; 
    &:hover { 
    background-color: ${props => props.disabled ? '#bebebe' : '#f98d00'}; 
    } 
` 

export default function HelloWorld() { 
    return (
    <div> 
     <p> 
     <Button disabled>disabled button</Button> 
     and 
     <Button>button</Button> 
     </p> 
     <p> 
     How can EnhancedButton in a different component re-use all of Button's rules and override some of them (in this case the background color and hovered background color? 
     <EnhancedButton disabled>disabled enhanced button</EnhancedButton> 
     and 
     <EnhancedButton>enhanced button</EnhancedButton> 
     </p> 
    </div> 
); 
} 

Answer 1

我想通了這一點，就這麼簡單的例子。

styled 

可以乘座標籤或者作爲arguemnt一個組成部分，所以在這種情況下，所有我需要做的就是改變

const EnhancedButton = styled.button` 

到

const EnhancedButton = styled(Button)` 

這裏的工作版本上Webpackbin http://www.webpackbin.com/VyjrMGJ9f