サードパーティ製コンポーネント内の子要素のスタイル

Question

以下のレンダリングメソッドで「Dialog」という名前のサードパーティコンポーネントを使用しています。ご覧のように、コンポーネントには複数のclassNameがあります。私は "SURFACE" classNameを持つdivに関連付けられた幅をオーバーライドさせる小道具を含むStyledDialogというスタイルのコンポーネントを作成したいと思います。これはStyled-Componentsで行うことができますか？または私のアプリにソースコードを持ち込み、手動で処理する必要がありますか？あなたの説明に基づいて

render() { 
    const { className, children, onClose, open, ...otherProps } = this.props; 
    const ariaHiddenProp = open ? {} : { 'aria-hidden': true }; 

    return (
    <aside 
     className={classnames(
     ROOT, 
     { 
      [ANIMATING]: this.state.animating, 
      [OPEN]: open, 
     }, 
     className 
    )} 
     onClick={(e) => { 
     if (onClose) onClose(e); 
     }} 
     onTransitionEnd={() => { 
     this.setState({ animating: false }); 
     }} 
     {...ariaHiddenProp} 
    > 
     <div 
     className={SURFACE} 
     onClick={(e) => { 
      e.stopPropagation(); 
     }} 
     {...otherProps} 
     > 
     {children} 
     </div> 
     <div className={BACKDROP} /> 
    </aside> 
); 
} 

Answer 1

、私はあなたがstyled方法と、このサードパーティのコンポーネントをラップし、ラップスタイルコンポーネントからそのコンポーネントの対応するクラス名を参照することで、あなたのスタイルを適用すべきだと思います。例えば

既存のコンポーネントの名前がHelloある場合は、次のようなそのDOMの子のいずれかにstyled-componentからスタイルを適用することができます

const StyledHello = styled(Hello)` 
    .${classes.SURFACE} { 
     width: 10rem; 
     border: 2px solid green; 
    } 
`; 

Working Demo