Question: Is it possible to use something like an `eventlistener` to detect when a JavaScript function runs. I want to detect it outside the actual function, and not just make this happen inside the function.

Answer: 
You should define all the styled components outside in a separate file (or multiple files). And then you should import those styled components directly within your component where you are going to use it.

Passing them as props is a bad practice.

For example you can create a file called 'StyledComponents.js' and export all your styled components.

```
...

export const LessonContainers = styled.div`
  margin: 2rem 0 2rem 0;
`;

export const LessonSideBarTitle = ({children}) => {
  const {SideBarValue} = React.useContext(CounterContext);
  const [SideBarThemeValue] = SideBarValue;
  const PageColor = SideBarThemeValue && SideBarThemeValue.PageContentColor;

  const H1 = styled.h1`
    font-size: 1.8rem;
    font-weight: 500;
    color: ${(PageColor ? PageColor : "#2c3e50")};
    font-family: 'Roboto';
    margin-top: 1rem;
  `;

  return <H1>{children}</H1>
}
...

```

And now in the `Introduction` or `CreatingFirstJS` component, you can just import the necessary styled components like so:

```
import {LessonSideBarTitle} from 'path/to/StyledComponents';

```
Another way is to take advantage of the styled object properties, to remove the ugly long interpolation of props by destructuring the props

```
import styled from "styled-components"

const Button = styled.button(
  ({ bgColor, fontColor }) => `
    background: ${bgColor};
    color: ${fontColor};
  `
);

function App() {
  return (
    <Button bgColor="#000" fontColor="#fff"> Hello World </Button>
  )
}

```

[Example in codesandbox](https://codesandbox.io/s/styled-object-css-utility-7c05ge?file=/src/App.js)