标签: chakra-ui

我不知道如何使 Chakra 组件内联。阅读文档但无法找出正确的属性或者这是否是 css 类的东西。

<Text> Hello World, </Text>
<Text> place me next to the Text above! </Text>

可以使用 Tailwind CSS 来设置 Chakra UI 组件的样式吗？

在此片段中，我使用 Avatar 组件，但图像并未像 next/image 那样在网站中自动优化

代码片段

const ee = (props: any) => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Box w="300px" h="400px"  >
      <Flex h="100%" w="100%" flexDir="column" align="center">
        <Avatar shadow='lg' size="xl" mt={5} src={props.image} />
        <Box  shadow='md' w="100%" h="250px"mt={5} rounded="xl" bgColor={colorMode === "light" ? "gray.100" : "gray.600" } >
          <Box  w="100%" h="20%"  p={2}  bgColor={colorMode === "light" ? "gray.200" : "gray.700"} rounded="xl" >
            <Flex  direction="row" justifyContent="space-between" align="baseline" >
              <Flex >
              <Badge  colorScheme="twitter" mr={2} rounded="md" p="1">

                Success
              </Badge>
              <Badge colorScheme="twitter" …

我想在 React js 的 chakra UI 中创建自定义大小的模态。模态应该具有宽度 1000px 和高度 800px 我尝试使用主题创建自定义大小的模态，其中我覆盖了模态的 xl 大小，但它不起作用

const theme = extendTheme({
  breakpoints,
  config,
  fonts: {
    heading: "Nunito",
    body: "Nunito",
  },
  components:{
Modal:{
  sizes:{
    xl:{     
        h:"600px",
        w:'1000px',
      },     
    }
  }
}
},
  colors: {
    yellow: {
      100: "#FFBE17",
    },
    green: {
      100: "#45C79B",
    },
    red: {
      100: "#E8736F",
    },
   
    gray: {
      100: "#D1D1D1",
      200:'#E5E5E5',
      300:"#C4C4C4"
    },
  },
});

 components:{
Modal:{
  sizes:{
    xl:{
      h:"600px",
      w:'1000px',
     
    }
  }
}

createByModal 基本上是一个脉轮模态，我在其中使用工具提示。每当我将鼠标悬停在图标上时，工具提示会在屏幕顶部而不是图标顶部显示我。在照片中，您可以看到忽略元素正在显示在左上角

const CreatedByModal = () => {
  return (
    <Stack
      spacing={"4"}
      margin={"0px !important"}
      alignItems={"center"}
      px={{ base: "2", lg: "6" }}
      pt={"2"}
    >
      <HStack justifyContent={"space-between"}>
        <Tooltip
          bg={"white"}
          textAlign={"center"}
          color={"black"}
          placement="top"
          label="Tip"
          aria-label="A tooltip"
        >
          <AiFillWallet size={"1.2rem"} color={"#b1bad3"} />
        </Tooltip>
        <Tooltip
          bg={"white"}
          textAlign={"center"}
          color={"black"}
          placement="top"
          label="Ignore"
          aria-label="A tooltip"
        >
          <AiFillEyeInvisible size={"1.2rem"} color={"#b1bad3"} />
        </Tooltip>
      </HStack>
    </Stack>
  );
};

我在 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

我正在使用 Chakra-UI 为我的 NextJS 项目创建 UI，并且正在努力让导航栏正常工作。它和移动导航菜单一样被正确修复，但菜单位于背景 div 的前面，但英雄 div 的后面（使用带有设置 blackAlpha 的 Flex' 组件）

如何让菜单只位于前面？使用沼泽标准CSS，如果我遇到这样的问题，我只使用z-index，但它对我不起作用。任何帮助表示赞赏

主页.js

import React from 'react';
import Hero from './Hero/Hero';
import Header from './Header/Header';
import Features from './Features/Features';

const HomePage = () => {
  return (
    <>
      <Header/>
    <Hero/>
    <Features/>
    </>
  );
}

export default HomePage

我的 Header.js （已删除绒毛）

const Header = () => {

 return (
    // Header/TopNav Container
    <chakra.header
      ref={ref}
      shadow={y > height ? "sm" : undefined}
      transition="box-shadow 0.2s"
      bg={bg}
      borderTop="6px solid"
      borderTopColor="brand.400"
      w="full" …

这让我很头疼。也许我只是错过了一些愚蠢的事情，希望你们能提供帮助。

整个 html 元素的宽度约为移动设备屏幕的 80%。

在笔记本电脑上，减小屏幕尺寸并不能重现该问题。html 将按预期为全尺寸。

这是该应用程序的链接，您可以自己查看：https ://kaayo.vercel.app/

我尝试使用 android devtools 进行调试，结果如下：

最后，这是我的 chakraTheme.js：

global: {
      "html, body": {
        color: "gray.600",
        margin: "0",
        padding: "0",
        lineHeight: "tall",
        fontWeight: "400",
        backgroundColor: "bg.100",
      },
      body: { minHeight: "100vh" },
      "input:focus": {
        borderColor: "primary.200!important",
      },
      "a:hover": {
        textDecoration: "none",
      },
      ':focus:not(:focus-visible):not([role="dialog"]):not([role="menu"])': {
        boxShadow: "none !important",
      },
    },

如果您还需要什么，请告诉我。

感谢您的帮助！

我正在尝试安装@chakra-ui它并将其与 Next 一起使用，但它根本不起作用。我卸载并重新安装了它，但它不起作用。

我使用的npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 安装时没有显示任何错误，但是当我去使用import {} from '@chakra-ui/react'它时它不起作用，它说：

找不到模块“@chakra-ui/react”或其相应的类型声明。

我使用 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" …