类型的参数不可分配给 BaseUI 类型的参数

Question

我现在从 zeit 运行 now 得到这个错误：

Argument of type '{ "@media only screen and (max-width: 767px)": { width: string; }; }' is not assignable to parameter of type '(props: object & { $theme: Theme; }) => any'.

Object literal may only specify known properties, and '"@media only screen and (max-width: 767px)"' does not exist in type '(props: object & { $theme: Theme; }) => any'.  TS2345

const StyledHead = withStyle(BaseStyledHead, {
 "@media only screen and (max-width: 767px)": {
   width: "1000px"
  }
});

我不明白为什么会出现此错误，就像它无法识别 width。我使用 yarn 来安装软件包。如您所见，它是一个打字稿应用程序，使用 BaseUI(Uber) UI 框架。

组件代码如下：

import React, { useState } from "react";
import Moment from "react-moment";
import { styled, withStyle, createThemedUseStyletron } from "baseui";
import { Col as Column } from "../../../components/FlexBox/FlexBox";
import Input, { SIZE } from "../../Input/Input";

import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { Wrapper, Header, Heading } from "../../WrapperStyle";

import {
  StyledTable,
  StyledHead as BaseStyledHead,
  StyledHeadCell as BaseStyledHeadCell,
  StyledBody as BaseStyledBody,
  StyledRow,
  StyledCell as BaseStyledCell
} from "baseui/table";

type CustomThemeT = { red400: string; textNormal: string; colors: any };
const themedUseStyletron = createThemedUseStyletron<CustomThemeT>();

const Status = styled("div", ({ $theme }) => ({
  ...$theme.typography.fontBold14,
  color: $theme.colors.textDark,
  display: "flex",
  alignItems: "center",
  lineHeight: "1",
  textTransform: "capitalize",

  ":before": {
    content: '""',
    width: "10px",
    height: "10px",
    display: "inline-block",
    borderRadius: "10px",
    backgroundColor: $theme.borders.borderE6,
    marginRight: "10px"
  }
 }));

const Col = styled(Column, () => ({
  "@media only screen and (max-width: 767px)": {
    marginBottom: "20px",

    ":last-child": {
      marginBottom: 0
    }
  }
}));

const TableWrapper = styled("div", () => ({
  width: "100%",
  height: "400px",
  padding: "0 25px 25px"
}));

const StyledHead = withStyle(BaseStyledHead, {
  width: "100%",

  "@media only screen and (max-width: 767px)": {
    width: "1000px"
  }
 });

const StyledBody = withStyle(BaseStyledBody, {
  width: "100%",

  "@media only screen and (max-width: 767px)": {
    width: "1000px"
  }
});

const StyledHeadCell = withStyle(BaseStyledHeadCell, {
  fontFamily: "'Lato', sans-serif",
  fontWeight: 700,
  color: "#161F6A !important"
});

const SmallHeadCell = withStyle(StyledHeadCell, {
  maxWidth: "70px"
});

const StyledCell = withStyle(BaseStyledCell, {
  fontFamily: "'Lato', sans-serif",
  fontWeight: 400,
  color: "#161F6A !important"
});

const SmallCell = withStyle(StyledCell, {
  maxWidth: "70px"
});

 const GET_ORDERS = gql`
 query getOrders($status: String, $limit: Int, $searchText: String) {
    orders(status: $status, limit: $limit, searchText: $searchText) {
      id
      creation_date
      delivery_address
      amount
      payment_method
      contact_number
      status
      customer_id
    }
  }
`;

export default function Orders() {
  const [customer_id, setCustomerId] = useState("");
  const [search, setSearch] = useState([]);
  const [useCss, theme] = themedUseStyletron();
  const sent = useCss({
    ":before": {
      content: '""',
      backgroundColor: theme.colors.primary
    }
  });
  const failed = useCss({
    ":before": {
      content: '""',
      backgroundColor: theme.colors.red400
    }
  });
  const packing = useCss({
    ":before": {
      content: '""',
      backgroundColor: theme.colors.textNormal
    }
  });
  const paid = useCss({
    ":before": {
      content: '""',
      backgroundColor: theme.colors.blue400
    }
  });

  const { data, error, refetch } = useQuery(GET_ORDERS);
  if (error) {
    return <div>Error! {error.message}</div>;
  }

  console.log(data && data.orders.map(item => Object.values(item)));
  function handleSearch(event) {
    const { value } = event.currentTarget;
    setSearch(value);
    refetch({ searchText: value });
  }
  return (
<Wrapper>
  <Header style={{ padding: "25px 10px" }}>
    <Col md={2}>
      <Heading>Orders</Heading>
    </Col>

    <Col md={10}>
      <Input
        value={search}
        size={SIZE.compact}
        placeholder="Quick Search"
        onChange={handleSearch}
        clearable
      />
    </Col>
  </Header>

  <TableWrapper>
    <StyledTable>
      <StyledHead $width="100%">
        <SmallHeadCell>Id</SmallHeadCell>
        <StyledHeadCell>Time</StyledHeadCell>
        <StyledHeadCell>Delivery Address</StyledHeadCell>
        <StyledHeadCell>Amount</StyledHeadCell>
        <StyledHeadCell>Payment Method</StyledHeadCell>
        <StyledHeadCell>Contact</StyledHeadCell>
        <StyledHeadCell>Status</StyledHeadCell>
      </StyledHead>
      <StyledBody $width="100%">
        {data &&
          data.orders
            .map(item => Object.values(item))
            .map((row, index) => (
              <StyledRow key={index}>
                <SmallCell>{row[0]}</SmallCell>
                <StyledCell>
                  <Moment format="Do MMM YYYY">{row[1]}</Moment>
                </StyledCell>
                <StyledCell>{row[2]}</StyledCell>
                <StyledCell>{row[3]}</StyledCell>
                <StyledCell>{row[4]}</StyledCell>
                <StyledCell>{row[5]}</StyledCell>
                <StyledCell>
                  <Status
                    className={
                      row[6] === 1
                        ? sent
                        : row[6] === 2
                        ? paid
                        : row[6] === 3
                        ? packing
                        : row[6] === 4
                        ? failed
                        : ""
                    }
                  >
                    {row[6] === 1
                      ? "sent"
                      : row[6] === 2
                      ? "paid"
                      : row[6] === 3
                      ? "packing"
                      : row[6] === 4
                      ? "failed"
                      : ""}
                  </Status>
                </StyledCell>
              </StyledRow>
            ))}
      </StyledBody>
    </StyledTable>
  </TableWrapper>
</Wrapper>
  );
}

Answer 1

我用这个解决

const StyledHead = withStyle(BaseStyledHead, () => ({
  width: "100%",

  "@media only screen and (max-width: 767px)": {
    width: "1000px",
  },
}));

类型的参数不可分配给 BaseUI 类型的参数

Argument of type is not assignable to parameter of type BaseUI

reactjs

vercel

css-in-js

baseweb