How to inherit styles in Styled Components?

Question

React

How to inherit styles in Styled Components?
I need to take my react component and change some styles in it. I import the react component MyInput, inside it I styled everything using Styled Components. If you render, then everything is OK, but I want to change a couple of styles in it, how to do this using Styled COmponents, please tell me.
import MyInput from '../components/Input';

const EnchantedInput = styled.MyInput`
  border: 3px solid red;
`;

const EnchantedInput = MyInput.extend`
  border: 3px solid red;
`;

const EnchantedInput = styled(TextInput)`
  &&& {
    color: palevioletred;
    font-weight: bold;
    border: 10px solid red;
  }
`;

These options don't work :(
Either I'm doing something wrong... can someone explain the difference between these 3 examples?
Maybe it's not really achieved in styled Components and you need to use High Order Component ? I
also see the option to hang Style = { {}} ...

Answer 1

If you want to change the styles of React.Component , you need to pass the className property to the render method . You can also move all component elements to static fields in order to redefine their styles later.

const Wrapper = styled.div`
  // some styles
`;

const ChildElement = styled.div`
  // some styles
`;

class MyComponent extends React.Component {
  static ChildElement = ChildElement;
  
  render() {
    const { className } = this.props;

    return (
      <Wrapper className={className}>
        <ChildElement>Some text</ChildElement>
      </Wrapper>
    )
  }
}

export default MyComponent;

const SyledMyComponent = styled(MyComponent)`
  // some styles

  ${MyComponent.ChildElement} {
    // some styles for ChildElement
  }
`;

The extend method only works with StyledComponent :

const AbstractElement = styled.div`
  // some styles
`;

const ConcreteElement = AbstractElement.extend`
  // some styles
`;

Answer 2

Something I didn't understand. Is it possible to write simpler, in relation to the author's Wishlist?
here he imported
import MyInput from '../components/Input';
Now we need to mix styles