Anreden eines untergeordneten Elements in einer Drittanbieterkomponente

Question

Ich verwende eine Drittanbieterkomponente namens "Dialog" mit der folgenden Rendermethode. Wie Sie sehen können - die Komponente hat mehr als einen Klassennamen. Ich möchte eine styled-Komponente namens StyledDialog erstellen, die eine Requisite enthält, mit der ich die Breite überschreiben kann, die dem div mit dem Klassennamen "SURFACE" zugeordnet ist. Kann das mit Styled-Komponenten gemacht werden - oder muss ich den Quellcode in meine App bringen und diesen manuell behandeln?

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

Basierend auf Ihrer Erklärung, ich glaube, Sie diese 3rd-Party-Komponente mit styled Methode wickeln sollen und Ihre Stile anwenden, indem Sie die entsprechenden Klassennamen dieser Komponente aus der umwickelten Stil Komponente verweist.

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

Working Demo

:

Zum Beispiel, wenn der Name der vorhandenen Komponente Hello ist, können Sie Styling von einem styled-component auf jeder seiner DOM Kinder wie dies gilt