小编Abd*_*aju的帖子

我在 chakra_ui 中扩展了主题提供程序

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";

import App from "./App";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#44337A",
      100: "#B794F4"
    }
  }
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  rootElement
);

我使用了 Button 组件，并将 colorScheme 属性设置为我的主题的值：

 <Button size="sm" colorScheme="brand.100">
    Click Me
  </Button>

它在 css 中生成了以下内容：background: brand.50.500;。所以它不应用颜色，有什么问题吗？

我注意到一些东西，没有.number：例如 .50 或 .100...该品牌不起作用，但其他内置颜色起作用。

https://codesandbox.io/s/infallible-allen-1k0tx?file=/src/App.js:257-333

tsconfig.json 文件中的路径定义。

"baseUrl": ".",
  "paths": {
    "@assets*": ["src/assets*"],
    "@components*": ["src/components*"],
    "@pages*": ["src/pages*"],
    "@theme*": ["src/theme*"],
    "@methods*": ["src/methods*"],
    "@interfaces*": ["src/interfaces*"],
    "@mock_data*": ["src/mock_data*"]
},

错误：Can't resolve '@components/MainTabs/MainTabs'

我认为 ionic 6 使用vite，所以我不知道在哪里添加config

我正在使用 React 和 Ionic，提交表单后，我想以编程方式导航到下一条路线，

当我做：

const { navigate } = useContext(NavContext);
// After Async call....
navigate("/", "forward", "pop").

有用。

当我在这里查看 ionic-react 文档时： https: //ionicframework.com/docs/react/navigation#navigation我看到他们曾经history以编程方式导航，并且它说note: history is a prop.

我尝试了上面的语句，我得到：Property 'history' does not exist on type '{ children?: ReactNode; }'.

需要一个解释。

应用程序.tsx

<IonRouterOutlet>
     <Route exact path="/" component={Dashboard} />
     <Route path="/home" component={Home} exact={true} />
     <Route path="/login" component={Login} />
     <Route path="/signup" component={Signup} />
</IonRouterOutlet>

我创建了一个 vite-react 应用程序，在我的应用程序中我试图获取公共 API

https://api.football-data.org/v4/matches

// This does not work

但我得到

Access to fetch at 'https://api.football-data.org/v4/matches' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我知道该错误意味着什么，但这是一个公共 API，我对在哪里添加 CORS 感到困惑。

但我注意到我可以使用相同的方法成功获取另一个公共 API。

http://swapi.dev/api/planets/1/

// This API works

页面.tsx

const fetchAllCompetitions = async () => {
  const res = await fetch("https://api.football-data.org/v4/matches");
  return res.json(); …