Styled-systems 不会出现在 web 上，就像它在移动设备上的 react native 一样答案

【问题标题】：Styled-systems doesn't appear on the web as it does on mobile in react nativeStyled-systems 不会出现在 web 上，就像它在移动设备上的 react native 一样
【发布时间】：2021-02-26 09:55:37
【问题描述】：

今天我开始了一个带有 expo 的项目，我想使用 styled-system。我使用 Styled-system 创建并使用了一个自定义组件。虽然它在移动设备上看起来不错，但风格并没有出现在世博会网站上。这是什么原因？

为了展示我编写的代码作为示例，我将文本组件和主屏幕编写如下。

这是它在 iOS 和网络上的外观。

'Text.js
import {Text as T} from 'react-native';
import styled from 'styled-components';
import {compose, color, size, typography, space} from 'styled-system';
const Text = styled(T)(compose(typography, space, color, size));
export default Text;

'Home.js
import React from "react";

import { Text, Input, Box, Button } from "../components/style";

export default function HomeScreen({ navigation }) {
  return (
    <Box flex={1} justifyContent="center" alignItems="center">
      <Text fontSize={21}>Search a movie</Text>
      <Input
        width="90%"
        height={70}
        px={20}
        fontSize={20}
        bg={"#ddd"}
        color="black"
        mt={10}
        placeholder="movie name"
        borderRadius="normal"
      />
      <Button
        width="90%"
        mt={30}
        bg="0.dark"
        height={70}
        borderRadius="normal"
        onPress={() => navigation.navigate("Details")}
      >
        <Text color="0.light" fontWeight="bold" fontSize={18}>
          Ara
        </Text>
      </Button>
    </Box>
  );
}

【问题讨论】：

标签： reactjs react-native expo styled-system

【解决方案1】：

我解决了，你必须使用'styled-components/native'

【讨论】：