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

我从zeit now运行

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"
  }
});

我不明白为什么会出现这个错误，就像它无法识别宽度一样。我使用

warn

来安装软件包。正如您所看到的，它是一个typescript应用程序，使用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>
  );
}

import React，{useState}来自“React”；
从“反应力矩”导入力矩；
从“baseui”导入{styled，withStyle，CreateMetedUseStyletron}；
从“../../../components/FlexBox/FlexBox”导入{Col as Column}”；
导入输入，{SIZE}来自“../../Input/Input”；
从“graphql标签”导入gql；
从“@apollo/react hooks”导入{useQuery}”；
从“./../WrapperStyle”导入{Wrapper，Header，Heading}”；
进口{
风格化，
StyledHead作为BaseStyledHead，
StyledHeadCell作为BaseSyledHeadCell，
StyledBody作为BaseStyledBody，
StyledRow，
StyledCell作为BaseStyledCell
}从“baseui/表”；
键入CustomThemeT={red400:string；textNormal:string；colors:any}；
const-themedUseStyletron=createThemedUseStyletron（）；
const Status=styled（“div”，（{$theme}）=>({
…$theme.排版.fontBold14，
颜色：$theme.colors.textDark，
显示：“flex”，
对齐项目：“中心”，
线宽：“1”，
textTransform:“大写”，
“：之前”：{
内容：“”“”，
宽度：“10px”，
高度：“10px”，
显示：“内联块”，
边界半径：“10px”，
背景颜色：$theme.borders.borderE6，
marginRight：“10px”
}
}));
const Col=styled（列，（）=>({
“@仅媒体屏幕和（最大宽度：767px）”：{
marginBottom：“20px”，
“：最后一个孩子”：{
marginBottom:0
}
}
}));
const TableWrapper=styled（“div”，（）=>({
宽度：“100%”，
高度：“400px”，
填充：“0 25px 25px”
}));
const StyledHead=withStyle（BaseStyledHead{
宽度：“100%”，
“@仅媒体屏幕和（最大宽度：767px）”：{
宽度：“1000px”
}
});
const StyledBody=withStyle（BaseStyledBody{
宽度：“100%”，
“@仅媒体屏幕和（最大宽度：767px）”：{
宽度：“1000px”
}
});
const StyledHeadCell=带有样式（BaseStyledHeadCell{
fontFamily:“Lato”，无衬线，
重量：700，
颜色：“161F6A！重要”
});
const SmallHeadCell=带有样式（样式headcell{
最大宽度：“70px”
});
const StyledCell=withStyle（BaseStyledCell{
fontFamily:“Lato”，无衬线，
体重：400，
颜色：“161F6A！重要”
});
const SmallCell=withStyle（StyledCell{
最大宽度：“70px”
});
const GET_ORDERS=gql`
查询getOrders（$status:String，$limit:Int，$searchText:String）{
订单（状态：$status，限额：$limit，searchText:$searchText）{
身份证件
创建日期
送货地址
数量
付款方式
联络电话
地位
客户识别码
}
}
`;
导出默认函数命令（）{
const[customer\u id，setCustomerId]=useState（“”）；
const[search，setSearch]=useState（[]）；
const[useCss，theme]=themedUseStyletron（）；
const sent=useCss({
“：之前”：{
内容：“”“”，
背景颜色：theme.colors.primary
}
});
const failed=useCss({
“：之前”：{
内容：“”“”，
背景颜色：theme.colors.red400
}
});
const packing=useCss({
“：之前”：{
内容：“”“”，
背景颜色：theme.colors.textNormal
}
});
const paid=useCss({
“：之前”：{
内容：“”“”，
背景颜色：theme.colors.blue400
}
});
const{data，error，refetch}=useQuery（获取订单）；
如果（错误）{
返回错误！{Error.message}；
}
log（data&&data.orders.map（item=>Object.values（item））；
函数handleSearch（事件）{
const{value}=event.currentTarget；
设置搜索（值）；
refetch（{searchText:value}）；
}
返回(
命令
身份证件
时间
送货地址
数量
付款方式
接触
地位
{数据&&
数据、订单
.map（项=>Object.values（项））
.map（（行，索引）=>(
{行[0]}
{行[1]}
{row[2]}
{row[3]}
{row[4]}
{row[5]}
{行[6]==1
“已发送”
：行[6]==2
“已付”
：第[6]行===3
“包装”
：行[6]==4
？“失败”
: ""}
))}
);
}

我用这个解决问题

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

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

我解决这个问题

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

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