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

Question

我正在尝试从内联样式切换到 css-in-jsx。 我发现了 styled-components 并希望如果我使用完全相同的样式特性，我会在两种情况下得到相同的结果。 然而，情况似乎并非如此。

例如，

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

当我使用它时，一切正常。 但是，现在我在另一个文件中做了这个：

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

当我注释掉我的旧div并使用Wrapper而不是它时，我得到了这个：

为什么会这样？ 如果样式命令相同，为什么我得不到相同的结果？ 这是否意味着，如果我转向样式组件，我将不得不修复所有组件？

另外，我该如何解决这个特殊情况？ :D

Answer 1

我同意评论，沙箱会很好。 我不知道它是否会解决您的问题，但通常将您的样式道具指定为没有引用分隔符的字符串是一个好习惯，即

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