Confusion about using "Styling any Components" with styled components (Pro/Cons)

Hi out there, i wasn’t able to get into the styled-components sprectrum chat (due to Internal Server Error), so i am taking my question to this place.

I am relatively new to react(js) and looked for the best ways to add styling to a new medium sized react project. When i found styled-components it looked like the most promising solution to solve all my styling problems.

So this is how i started, and got stuck:

1. As i usually start with an import of Bootstrap 4 css / js. So i imported the corresponding css and js files in the index.js to reference its classes in my components.
2. I added the styled-components Theming for my global colors, sizes, …
3. THIS IS WHERE I TO GET STUCK: 3.1 For trivial (simple/flat) presentational components i see how styled-components is an amazing choice. 3.2 But what about more complex components with two or more levels deep? So this would be an example of a LoginForm - Component:

…/components/LoginForm/LoginForm.js

import React from 'react';
import LoginHeader from './LoginHeader';
import LoginForm from './LoginForm';
import LoginFormTitle from './LoginForm/LoginFormTitle/LoginFormTitle';
import LoginFormFields from './LoginForm/LoginFormFields/';

const Login = (props) => {
  return (
    <div className="row">
      <div className={props.className}>
        <LoginHeader>Login</LoginHeader>
        <LoginForm>
          <LoginFormTitle>
            {props.title}  // or {children}?
          </LoginFormTitle>
          <LoginFormFields />
        </LoginForm>
       </div>
    </div>
  );
};
export default Login;

And now i would like to dress up this component with a style and tend to create the following:

…/components/LoginForm/styled.js

import styled from 'styled-components';
import Login from './Login';

const LoginStyled = styled(Login).attrs({
  className: ${ props => props.center ? "mx-auto" : ""}
})`
  background-color:grey;
  color: white;
  border-color: black;
`;

export default LoginStyled;

And the third file renaming the LoginStyled component to Login component: …/components/LoginForm/index.js

import LoginStyled from './styled';

const Login = LoginStyled;

export default Login;

to reference it in App.js component like this:

…App.js

const App = () => (
  <ThemeProvider theme={theme}>
    <Window>
      <Header>
        <Menu />
        <Title />
        <Toolbar>
          <ToolbarItem />
          <ToolbarItem />
          <ToolbarItem />
        </Toolbar>
      </Header>

      <Content>
        <Login  title="Welcome" center />
      </Content>
    </Window>
  </ThemeProvider>
);

export default App;

Sorry for typos and other conceptual mistakes as i am new to both (react) and styled-components. In general i try to figure out if styled-components can be my one-stop shop for all styling tasks and how it’s meant to be or how far i can bend it so i can a clean component structure …

Thanks a lot for help and suggestions!

[mxstbr]

Consider carefully whether to wrap your own components in a styled component, when it isn’t necessary.

Self explanatory

You will disable the automatic whitelisting of props,

We ship a whitelist of valid DOM attributes, and filter them from the props you pass to your components. For example:

const Button = styled.button``

// This JSX:
<Button primary />

// outputs this HTML:
<button class="sc-asdf123 asdf123" />

// Note how the primary prop of the component is _not_ attached as an attribute to the DOM

const CustomButton = (props) => <button {...props} />
const Button = styled(CustomButton)``

// This JSX:
<Button primary />

// outputs this HTML:
<button class="sc-asdf123 asdf123" primary="true" />

// Note how the primary prop of the component _is attached_ as an attribute to the DOM

and reverse the recommended order of styled components and structural components.

The idiomatic way of using styled-components encourages the creation of small, encapsulated components that do one thing and do it well. (styling/layout) This leads to a more understandable system overall, since more easily understanding the small pieces leads to more easily understandable big pieces.

[mxstbr]

The idiomatic way of using styled-components is to go the other way around:

const LoginWrapper = styled.div.attrs({
  className: ${ props => props.center ? "mx-auto" : ""}
})`
  background-color:grey;
  color: white;
  border-color: black;
`;

const Login = (props) => {
  return (
    <div className="row">
      <LoginWrapper>
        <LoginHeader>Login</LoginHeader>
        <LoginForm>
          <LoginFormTitle>
            {props.title}  // or {children}?
          </LoginFormTitle>
          <LoginFormFields />
        </LoginForm>
       </LoginWrapper>
    </div>
  );
};
export default Login;

Rather than using the styled(Login) way of doing things and attaching the class name, create a small Wrapper component that you use instead of the <div className={props.className} />!

Hope that helps