どのように親がスタイル規則で子供にスタイル規則を上書きすることができますか？

Question

私はボタンとボタンを再利用したいいくつかの他のバージョンを持っていますが、いくつかの特定のルールをオーバーライドしています。幅、高さ、色、またはホバリング状態の色など

これは、すべてのプロパティを小道具として手動で渡す必要はありませんか？ここで

は、私はちょうどそう単純で、これを考え出し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

webpackbinた例です。この場合には、私がしなければならなかったすべては

const EnhancedButton = styled(Button)` 

に

const EnhancedButton = styled.button` 

を変更することでしたので、

styled 

は、arguemntとしてタグまたはコンポーネントを取ることができますいずれかをここで作業バージョンですWebpackbinでhttp://www.webpackbin.com/VyjrMGJ9f