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.

aditya · Accepted Answer · 2017-06-16 12:17:03Z

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

edited Jun 16, 2017 at 12:17

answered Jun 16, 2017 at 11:58

aditya

3393 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bigpotato Over a year ago

But what about positioning? Like sometimes I want the component to have margin-bottom: 10px in one component, width: 100px in another, etc

aditya Over a year ago

yeah, you could do that using this approach, here in this case if you give margin-bottom: 10px to the Link it will apply this property to the component's root element, a in this case

bigpotato Over a year ago

But won't I have to either 1) create a special Link component every time I want to change the margin or 2) expose a margin-bottom prop? Neither of them seem any better than just using the style={styles.link} approach

aditya Over a year ago

No why do you want to create a Link component you are just confusing it with my example, in your case you can use const ButtonStyle = styled(Button)

bigpotato Over a year ago

Yeh but my point is, if I have 10 different buttons and their only difference is 1px each in margin-top, how would I build that?

|

Faris · Accepted Answer · 2017-06-16 11:58:12Z

0

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>
)

edited Jun 16, 2017 at 11:58

answered Jun 16, 2017 at 11:56

Faris

5432 silver badges8 bronze badges

2 Comments

bigpotato Over a year ago

My concern is not about the facebook button but about having to style things half using the style object in JS and half in CSS

Faris Over a year ago

Yes exactly, i just showed you an example of how you can use only one way! no need to mix, it applies to everything!

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related