Изменение встроенного стиля в styleled-компонент

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