在 next.js 應用程序中使用 jest 測試 chakra-ui

[英]Testing chakra-ui using jest in a next-js app

我有一個登錄頁面 我想使用 jest 對此頁面進行快照測試。 我將Login.test.tsx創建為 這是測試使用 chakra-ui 創建的 web 個頁面的正確方法嗎？ ...

如何在使用 ChakraUI 作為道具覆蓋的組件上使用 Variant？

[英]How to use Variant on component overrided using as props with ChakraUI?

我構建了一個自定義組件，並允許使用BoxProps將其作為另一個組件重新渲染： 當我嘗試使用as={Button}道具時它運行良好 但是我不能使用Button上可用的variant屬性 ...

反應響應式設計背景 colors 與桌面不同

[英]react responsive design background colors aren't the same as desktop

我正在開發一個網站並想讓它響應。 我在背景顏色方面遇到了一些問題。 我看到了我想要的頁面，但是在將它部署到 firebase 並在手機上查看它之后，背景 colors 發生了巨大變化。 第一張圖是結果，第二張圖是我想要的樣子。 有任何想法嗎？ 我正在使用反應和脈輪用戶界面。 ...

我如何在所有組件中使用 Chakra UI toast？

[英]How can I use a toast of Chakra UI throughout all the components?

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Snehil Agrahari想讓更多人關注這個問題： 需要一種方法來實現所需的壯舉當用戶在我的反應應用程序中發出任何請求時，我試圖顯示警報。 問題是目前我正在為單獨的組件使用單獨的 toast 組件。 我應該如何在整個應用程序中 ...

使用 Spacers 時如何將 Box 放在 Flex 的中心

[英]How to put Box in center of Flex when using Spacers

所以我有一個 header 我正在使用Flex 。 在那個 header 中，有一個項目我想在 header 的中心對齊。下面是一些示例代碼演示return ( <Box> <Box paddingTop={5} paddingBottom={5} paddingLef ...

我們可以從項目文件夾中的圖像加載 Chakra Ui Avatar 嗎？

[英]Can we load a Chakra Ui Avatar from an image in the project folder?

我不知道如何從項目文件夾加載圖像以用作 Chakra-UI Avatar。 src 屬性好像只能帶外鏈。 我正在處理的組件文件位於 src/Components/ 文件夾中，我要加載的圖像位於 src/images 文件夾中。 為什么這不能渲染我的頭像，有沒有辦法讓它工作？ ...

如果表單字符串輸入為空 React，如何禁用按鈕

[英]How to Disable Button if Form String Input is Empty React

如果輸入文本為空或超過 150 個字符，我試圖禁用表單上的提交按鈕。 出於某種原因，如果輸入大於 150 個字符，它就可以工作，但當它為空時就不能工作，我不確定為什么。 我已經嘗試了一切，但我仍然被困住了。 我不確定是因為我使用的是 Chakra UI 還是其他原因。 先感謝您。 這就是我所擁有的： ...

卡中未顯示堆棧分隔線 - Chakra UI

[英]Stack Divider Not Showing in Card - Chakra UI

我正在處理 Chakra UI 中的卡片組件。 卡體中的堆疊分隔器未顯示。 它是否需要以特定方式格式化才能顯示？ 比如設置一定的寬度？<Card width={"100%"} borderWidth="1px" borderRadius="l ...

成幀器運動 whileInView 在組件進入視口之前激活

[英]Framer motion whileInView activating before component is in viewport

我正在嘗試使用 Framer Motion 制作一個簡單的 animation，其中一個組件漂浮在其中並從左側變為不透明。 該組件位於英雄部分的正下方，但在頁面頂部時不會出現在視口中（英雄部分是整個視口高度）。 該組件與英雄部分位於單獨的 div 中。 請注意，如果這與此有關，我正在使用 Chakr ...

InputGroup 中 InputRightElement 內的兩個 IconButton

[英]Two IconButtons inside of InputRightElement in InputGroup

我正在研究 Chakra UI 中的搜索組件。 您應該如何在 InputGroup 的單個 InputRightElement 中放置兩個 IconButton？ 第二個 IconButton 位於輸入字段之外。<InputGroup size="lg" shadow={"md"} bord ...

我想創建一個水平滾動的View（ChakraUI）

[英]I want to create a View that scrolls horizontally（ChakraUI）

我正在使用查克拉用戶界面。 我想創建一個水平滾動的視圖。 有一個組件可以顯示/添加標簽，如下所示。 像這樣使用我想讓標簽排列的區域水平滾動。 我怎樣才能做到這一點？ 我知道這可以通過使用特定的 CSS 屬性來解決。 但是，我對web前端技術不熟悉，所以不知道該怎么做。 我讀過 overflow= ...

根據屏幕寬度在 UI 中使用 React 更改元素行為

[英]Using React change element behavior in UI based on screen width

我會寫一些關於我的項目的信息。 框架： NextJs，低於版本 13 UI 框架： ChakraUI（使用預定義組件，主要是 Flex） 想法如下：我已經測試並確定了哪些屏幕尺寸應該需要 UI 上的元素行為更改，並決定編寫代碼來促進該功能。 做這樣的事情，我將避免為每個頁面/組件編寫 @media ...

如何從 chakra-ui 手風琴中去除灰線

[英]How to remove grey lines from chakra-ui accordion

我的手風琴的頂部和底部有一條灰色線，我希望它不存在如何去除這些線？ https://chakra-ui.com/docs/components/accordion#styling-the-expanded-state手風琴在這里我瀏覽了 styles 但沒有運氣 ...

如何為單個 Chakra 標題元素中的文本設置不同的 colors

[英]How to set different colors for text within a single Chakra heading element

我目前正在使用 Chakra UI 和 Typescript 構建一個網站。主標題的最后一個字與標題的 rest 顏色不同。 例如，在以下代碼段中，C 的顏色應該不同於 A 和 B。 我已嘗試通過多種方式解決此問題，包括擁有多個 header 元素並將它們與 flex 水平對齊。 但是，我發現此方 ...

如何在 React JS 中一起使用脈輪提供者和材料 UI？

[英]how to use chakra provider and material UI together in React JS?

我們正在研究 flipkart.com 的克隆項目。我們正在團隊中工作。所以我們已經分發了我們的作品。 其中一個人在使用 material UI 開發登陸頁面，而我在使用 chakra ui 開發產品頁面，但在合並應用程序后無法正常工作並產生不熟悉的錯誤。 所以，請提供一些解決方案，以便我們進行演 ...

Chakra UI 模態疊加始終覆蓋所有屏幕

[英]Chakra UI Modal overlay always cover all screen

我正在使用脈輪 UI 組件 UI package。 模態疊加總是覆蓋所有屏幕。 如何讓 ModalOverlay 只覆蓋有限的屏幕？ 這是一個例子。 覆蓋僅覆蓋中心屏幕，粉紅色區域除外 https://i.stack.imgur.com/kbxEC.png ...

如何在輸入中正確接收數據數組

[英]How to correctly receive an array of data in input

我有一個編輯表單，其中有一個輸入，用於發送一組數據。 但是，在編輯表單中，即使輸入返回了一組要編輯的數據，它們也是單個值。 也就是說，如果我刪除此輸入中返回的數據，則所有數據都會被刪除。 此外，輸入中的名稱都粘貼在一起。] 如果可能的話，我想嘗試的是在編輯表單中以這種方式返回數據： 從那里，我可以 ...

與脈輪反應不會觸發 useEffect

[英]React with chakra doesn't trigger useEffect

我正在做將 chakra ui 與 create-react-app 結合使用的第一步。 UI 將是一個實時數據查看器（使用 react-plotly）。 如果由 send_plot_data 觸發，socket.io 服務器每秒發出新的 json 數據，並且 ui 應該使用 plotly-re ...

Next JS 13 創建進度條

[英]Next JS 13 create Progress bar

我試圖在我的 Next JS 13 應用程序目錄中實現進度條。 但舊方法不起作用。 有沒有辦法讓進度條工作？ 我使用NextNProgress和NProgress包。 但他們都沒有工作。 我什至嘗試使用next/route和Chakraui progress 從頭開始創建自己的。 但沒有運氣 這是我 ...

誰能幫我用 chakra ui 創建嵌套的側邊欄菜單

[英]can anyone help me to create nested sidebar menu with chakra ui

需要用 chakra ui 創建側邊欄菜單 Creating nested sidebar menu with chakra ui.Need to create nested sidebar menu with chakra ui.Thnks 提前 ...