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

Question

我正在尝试从内联样式切换为css-in-jsx。我发现了有关样式化组件的信息，并希望如果我使用完全相同的样式化功能，那么在两种情况下我都可以获得相同的结果。但是，事实并非如此。

例如，

<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;
`;