React hooks do not overwrite styles [TypeScript]

Environment

System:

• OS: macOS 10.14.4
• CPU: (4) x64 Intel® Core™ i5-6287U CPU @ 3.10GHz
• Memory: 166.97 MB / 16.00 GB
• Shell: 5.3 - /bin/zsh

Binaries:

• Node: 10.15.2 - /usr/local/bin/node
• Yarn: 1.15.2 - /usr/local/bin/yarn
• npm: 6.9.0 - /usr/local/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• babel-plugin-styled-components: ^1.10.0 => 1.10.0
• styled-components: ^4.1.3 => 4.1.3

Reproduction

I import a file which is a React Hook and want to override the color. But there is no effect on that 😢

// Modules
import React, { Fragment } from "react";
import styled from "styled-components";

// Hook
const MyHookTitle = () => {
  const InternalTitle = styled.h1`
    color: purple;
  `;
  return <InternalTitle>MyHookTitle</InternalTitle>;
};

// Styles
const StyledHook = styled(MyHookTitle)`
  color: red;
`;

export const App = () => {
  return (
    <Fragment>
      <MyHookTitle />
      <StyledHook />
    </Fragment>
  );
};

Expected Behavior

Color of title is red.

Actual Behavior

Color is purple

[epilande]

@nachbarshund InternalTitle is still in the render lifecycle. As mentioned in https://github.com/styled-components/styled-components/issues/2477#issuecomment-479510128, we shouldn’t be doing that. InternalTitle needs to be moved outside of MyHookTitle and the className needs to be passed down in order for StyledHook’s styles to apply.

// Modules
import React, { Fragment } from "react";
import styled from "styled-components";

const InternalTitle = styled.h1`
  color: purple;
`;

// Hook
const MyHookTitle = ({ className }) => {
  return <InternalTitle className={className}>MyHookTitle</InternalTitle>;
};

// Styles
const StyledHook = styled(MyHookTitle)`
  color: red;
`;

const App = () => (
  <Fragment>
    <MyHookTitle />
    <StyledHook />
  </Fragment>
);

Here’s a codesandbox of the above code https://codesandbox.io/s/9ol8molq4o

[nachbarshund]

@epilande Oh man big thanks. No I’ll get the point here. Thanks for helping 🚀