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

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 而不是那个时，我得到了这个：

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

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

Answer 1

我同意 cmets，沙盒会很好。我不知道它是否能解决您的问题，但通常最好将您的样式化道具指定为不带引用分隔符的字符串，即

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