How to shorten passed items in components

Question

I use styled-components each component from styled-components I pass in other components, in order to apply them, the problem is that my code looks ugly because every component style I pass in other components it looks like this

SideBarStyledComponents.js

export default function SideBarStyledComponents(props) {
    const {SideBarValue} = React.useContext(CounterContext);
    const [SideBarThemeValue] = SideBarValue;

    const PageColor = SideBarThemeValue && SideBarThemeValue.PageContentColor;
    const AlertBg = SideBarThemeValue && SideBarThemeValue.AlertBackground;

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

    const LessonSideBarTitle = styled.h1`
      font-size: 1.8rem;
      font-weight: 500;
      color: ${(PageColor ? PageColor : "#2c3e50")};
      font-family: 'Roboto';
      margin-top: 1rem;
    `;
    return(
        <RoutesPage {...props} LessonContainers={LessonContainers} SideBarThemeValue={SideBarThemeValue}
       LessonSideBarTitle={LessonSideBarTitle}/>
    );
}

RoutesPage.js

function RoutesPage(props) {
    const {path} = props.path;

    const routes = [
        {
            path: `${path}/Introduction`,
            component: () => <Introduction {...props} />
        },
        {
            path: `${path}/Creating Your First Javascript`,
            exact: true,
            component: () => <CreatingFirstJS {...props} />
        },
        {
            path: `${path}/Guardian`,
            component: () => <h2>Shoelaces</h2>
        }
    ];

    return (
        <>
            <Switch>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.component}
                    />
                ))}
            </Switch>
        </>
    );
}

Please pay attention, you have noticed every style I pass to the components and so every time I create a new component every style I have to pass this way I will have many components since I am creating a sidebar I want to know if there is a way to get rid of this

Answer 1

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';