将内联样式更改为样式组件

Question

I am trying to switch from inline styling to css-in-jsx. I found out about styled-components and was hoping that If I use exactly the same styling features, I would get the same results in both cases. However, that doesn't seem to be the case.

For example,

<Container component="main" maxWidth="xs">
      <CssBaseline />
      <div style={{
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center'
             }}>
      {/* <Wrapper> */}
        <Avatar>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
..................
      {/* </Wrapper> */}
      </div>
    </Container>
  );
}

when I use this, everything works well. However, now I have made this in another file:

export const Wrapper = styled.div`
  display: flex;
  flex-direction: 'column';
  align-items: center;
`;

When I comment out my old div and use the Wrapper instead of that, I get this:

Why is this so? If the styling commands are same, why don't I get the same results? Does this mean, I will have to fix all components if I am moving to styled-components?

Also, how can I fix this particular case? :D

Answer 1

I agree with the comments, a sandbox would be nice. I don't know if it will solve your issue, but usually it's a good practise to specify your styled props as strings without citation delimiters, ie

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;