React + Styled Components: Mixing CSS and JS style object?

Question

I have a few styled components like so:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.color};
  border-radius: 12px;
  border: none;
  box-shadow: 0 5px 40px 5px rgba(0,0,0,0.24);
  color: white;
  cursor: pointer;
  font-size: 15px;
  font-weight: 300;
  height: 57px;
  width: 331px;
`;

export default Button;

Nothing special there. Just styles like it's supposed to be.

However, when I actually use them in my bigger dumb components that are composed of other little components, I find myself styling them using a style object. This is for things like adding extra margin, positioning, and sizing.

const AuthenticationForm = ({
  visible,
}) => {
  return (
    <CenteredOverlay style={{ display: visible ? 'flex' : 'none' }}>
      <Box style={styles.box}>
        <img src={require('../images/logo.png')}
          style={styles.logo}
          alt="logo"
          width="60"
          height="60"
        />
        <TextInput placeholder='email' />
        <TextInput placeholder='password' />
        <PrimaryButton active>
          SIGN IN
        </PrimaryButton>
        <Hr />
        <div style={styles.facebookContainer}>
          <span style={styles.alternateLoginText}>
            You can also sign in with
          </span>
          <Button color='#003D82' style={styles.facebookButton}>
            Facebook
          </Button>
        </div>
      </Box>
    </CenteredOverlay>
  );
}

const styles = {
  alternateLoginText: {
    fontSize: '12px',
    color: '#FFFFFF',
    opacity: '0.6',
    marginRight: '15px',
  },
  facebookContainer: {
    padding: '12px',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
  },
  facebookButton: {
    width: '222px',
    height: '42px',
  },
  logo: {
    position: 'absolute',
    top: -30,
  },
  box: {
    position: 'relative',
    width: '447px',
  },
  container: {
    textAlign: 'center',
    alignSelf: 'center',
  },
}

export default AuthenticationForm;

It feels odd and kinda counterproductive to the point of using styled components, which is supposed to make my life easier? Now I have to write things two ways?

Please enlighten me if I'm doing things the wrong way.

Answer 1

Yeah, you are missing out how to actually use styled components, if you want to style any other component using styled components you can just use this pattern:

const ButtonStyle = styled(Button)`
    color: #003D82;
    width: '222px';
    height: '42px';
`;

<ButtonStyle>
     Facebook
 </ButtonStyle>

and use it as usual

More over here

Answer 2

You can use extend method, no need to mix between the two ways of styling your components!

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.color};
  ...etc
`;

export default Button;

---

const FacebookButton = Button.extend`
   width: '222px';
   height: '42px';
   color='#003D82'
`;
const AuthenticationForm = ({
  visible,
}) => (
  <FacebookButton>
    Facebook
  </FacebookButton>
)