标签: chakra-ui

我使用 Vercel 创建了一个 next.js 应用程序，然后使用以下命令行安装了 chakra-ui：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

它导致了以下错误：

TypeError: Object.fromEntries is not a function
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:21)
    at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
    at Array.map (<anonymous>)
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
    at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
    at Array.map (<anonymous>)
    at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
    at walkObject (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:31:10)
    at createThemeVars (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/create-theme-vars.js:19:25)
    at toCSSVar (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/to-css-var.js:28:64)

我尝试修改节点模块...这些是我的依赖项：

"dependencies": {
    "@chakra-ui/react": "^1.6.1",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@types/react": "^17.0.5",
    "framer-motion": "^4.1.16",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "typescript": "^4.2.4"
  }

这是我的 pages/_app.tsx 文件：

import '../styles/globals.css'
import { ChakraProvider } from "@chakra-ui/react" …

我正在使用 chakra ui，我想将抽屉组件的宽度设置为370px。我想将抽屉组件的宽度设置为370px。如果我传递smorlg作为尺寸，它会将尺寸更改为默认设置，但我无法将其更改为我想要的尺寸。

https://chakra-ui.com/docs/overlay/drawer

  <Drawer
    isOpen={isOpen}
    placement="right"
    onClose={onClose}
    finalFocusRef={btnRef}
    size="lg"
  >

完整错误：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

尝试将组件导入我的 Nextjs 页面，但出现上述错误。当我将组件中的所有代码放入页面时，它呈现得非常好，但是当我导入它时，出现错误。

这是主页代码：

export default function DealsList({data}){

    const { toggleColorMode } = useColorMode();

    return (<>
            <Button onClick={toggleColorMode}><SunIcon /></Button>
            <Box w={500} p={4} m="20px auto">
                <Heading as="h1" size="xl" textAlign="center">
                    Welcome to Stealz
                </Heading>
                <Heading as="h2" size="l" textAlign="center" m={5}>
                    Games on Sale
                </Heading>
                </Box>
                {data.map((deal) => (
                    <div key={deal.dealID}>
                        <Center>
                        <Box width="lg" 
                            borderWidth="1px"
                            _hover={{ bgGradient: "linear(to-r, gray.300, yellow.400, pink.200)" }}
                            mb="2" 
                            p={4}
                            rounded="lg" 
                            overflow="hidden"
                            shadow="1px 1px 3px rgba(0,0,0,0.3)"
                            >
                         
                        <Box
                            mt="1"
                            ml = "2"
                            mr = "2"
                            p={3}
                            fontWeight="semibold"
                            as="h4"
                            lineHeight="tight" …

错误说：不要将孩子作为道具传递。相反，当我添加这部分“children={}”时，将子级嵌套在开始和结束标记之间

我不熟悉反应和脉轮所以有人可以帮助解决这个问题吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<Stack id='phone'>
  <InputGroup>
    <InputLeftElement pointerEvents='none' children={<PhoneIcon color='gray.300' />} />
    <Input
      type='tel'
      name={`${type}[phone]`}
      autoComplete='phone'
      value={Phone}
      placeholder='Numero de telephone'
      className='chakra-input'
    />
  </InputGroup>
</Stack>

如何将我的应用程序组件设置为全高？我什至尝试在我的 index.html 中将 body 标记设置为高度 100%，但没有成功

我使用 UI 库制作 React 应用程序。我使用 React-router-dom v6 作为 Router 和 Chakra UI 作为库。我的应用程序可以正确导航到每个组件。但是，我想让“活跃”链接具有不同的风格。

这是我的标题：

import { Flex, Link, Icon } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

这是我的代码的链接部分：

<Link as={RouterLink} to="/dashboard" p={2} _activeLink={{fontWeight:'bold'}}>
  <Flex justifyContent="flex-start" ml={4} fontSize='1.25rem' alignItems="center">
    <Icon as={FaHome} mr={2} />
    Dashboard
  </Flex>
</Link>

我使用 _activeLink 道具来创建链接的活动类，但它不起作用。我什至尝试更改背景颜色和文本颜色。但一切都没有改变。我不知道我导入库时是否错误，或者我的代码中有其他内容。有人能给我解决这个问题吗？

我最近尝试将 Chakra UI 集成到我的 Next.js 应用程序中。我已遵循其文档中指南中的每一步：https ://chakra-ui.com/getting-started/nextjs-guide

但是，当我将 ColorModeScript 属性的初始颜色模式设置为“暗”时，它不适用。事实上，当我检查 chrome 开发工具中的元素时，我的 body 标签仍然显示它具有“chakra-ui-light”类，并且 html 标签的数据主题为 light 且 style="color-scheme: light" 。

我不知道为什么会这样。有人能帮忙吗？这是与我尝试强制黑暗模式相关的代码：

const config = {
  initialColorMode: "dark",
  useSystemColorMode: false,
};

const theme = extendTheme({ config });

然后我将 _app.js 包裹起来： <ChakraProvider theme={theme}>

document.js 像这样：

<body>
    <ColorModeScript initialColorMode="dark" />
    <Main />
    <NextScript />
</body>

编辑：我今天发现这个错误实际上只发生在开发环境中。当我部署到 Vercel 时，它确实将颜色模式设置为深色。我仍然不确定为什么会这样。

<Head>
        <title>Real Estate API Application</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

在每个 JSX 元素中，我都会收到此错误

我尝试删除节点模块，然后 npm install 。但它不起作用，我也在使用 Typescrip 5 和 Next 13.2 以及 Chakra UI

我想更改每个页面的正文背景。
对于 pageA，我希望背景为白色，对于 pageB，我希望背景为灰色。
我已经在chakra ui的全局样式中设置了背景，并且我希望能够更改道具中的背景颜色。

// theme.ts
import { extendTheme } from '@chakra-ui/react';

export const theme = extendTheme({
  styles: {
    global: {
      'html, body': {
        color: 'black',
        background: 'white',
      },
    },
  },
});

_app.tsx
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

问题

我编写的任何 CSS 类名都不会覆盖 Chakra UI 组件样式，即使将它们直接作为类名传递，例如：<Button className="my-class-that-wont-work">

复制步骤

我使用他们的CRA 指南创建了一个简单的新 Chakra-UI 项目

npx create-react-app my-app --template @chakra-ui

我继续添加一个文件并使用简单的类名将index.css其导入src/index.js（或）：src/App.jsx

npx create-react-app my-app --template @chakra-ui

但是，当我尝试使用 CSS 类覆盖任何 Chakra UI 的组件样式时，CSS 类样式会被 Chakra 的样式覆盖。这是一个简单的例子，试图使模态页脚具有弹性+空间，以便按钮展开。

<ModalFooter className="my-class-name">

这似乎是因为 Chakra UI在运行时<style>末尾使用标签注入由 Emotion CSS-in-JS 生成的 CSS <head>，这使得 Chakra 组件 CSS 有权覆盖 JSX 组件中导入的自定义 CSSimport "./index.css";

我的问题

有没有什么方法可以强制 Chakra UI CSS 在运行时在元素中提前加载，<head>以便我能够使用普通 CSS 类覆盖它？

实现这一点不仅可以让我更轻松地在现有代码库中实现 Chakra UI，还可以让像 Tailwind CSS 这样依赖实用程序类的框架正常工作。

编辑：似乎为了 …