Styled-systems 不会像在移动设备上那样出现在网络上

Question

今天我用 expo 开始了一个项目，我想使用 styled-system。我使用 Styled 系统创建并使用了一个自定义组件。虽然它在移动设备上看起来不错，但样式不会出现在 expo web 上。这是什么原因？

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

这是它在 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>
  );
}

Answer 1

我解决了，你得用'styled-components/native'

Styled-systems 不会像在移动设备上那样出现在网络上

Styled-systems doesn't appear on the web as it does on mobile in react native

reactjs

react-native

expo

styled-system