使用Chakra UI设置MDX文件的样式

文章/答案/技术大牛

发布

1回答

reactjs、typescript、next.js、eslint、mdxjs

我正在尝试在next.js应用程序中使用Chakra UI设置markdown文件的样式。为此，我创建了以下MDXComponents.tsx文件： import { chakra } from "@chakra-ui/react" p:(props) => <chakra.p font

浏览 46提问于2021-07-23得票数 0

回答已采纳

1回答

与主题UI集成的组件库

reactjs、styled-components、emotion、css-in-js、theme-ui

但它们都是“简单”的组件。也就是说，没有标签，手风琴，可排序的表格或其他具有更多“复杂”功能的组件。有什么建议吗？谢谢。

浏览 8提问于2020-01-29得票数 0

1回答

故事书vite未能使用ChakraUI / React 18构建

storybook、vite、emotion、chakra-ui、react-18

我正在使用Vite和Storybook创建一个UI库。不幸的是，故事书的构建是broken。我使用了最新版本

浏览 11提问于2022-09-05得票数 0

1回答

React路由器ERR_TOO_MANY_REDIRECTS

reactjs、react-router

我正在尝试设置React应用程序，但收到React Router ERR_TOO_MANY_REDIRECTS错误。我不确定这里出了什么问题，因为我只有一个页面(请参阅下面的代码)。我尝试过只将paragraph tag渲染到web上，但错误仍然不断出现(所以我假设是React Router的原因，而不是jsx本身) 任何帮助都将受到高度的感谢。下面是我的代码： import React from 'react'; import { CSSReset } from '@chakra</

浏览 26提问于2021-03-22得票数 2

1回答

如何用普通CSS类名覆盖Chakra* UI (或情感CSS-in-JS)样式？*

css、reactjs、webpack、emotion、chakra-ui

复制步骤我接着添加了一个index.css文件，并用一个简单的类名将它导入到src/index.js (或srcUI的组件样式时，CSS类样式就会被Chakra类所取代。<Mo

浏览 10提问于2022-07-21得票数 1

回答已采纳

1回答

Docusaurus:可以使用NPM包中的组件吗？

reactjs、docusaurus、chakra-ui

我目前正在开始使用Docusaurus。我知道我可以使用mdx文件(https://docusaurus.io/docs/markdown-features/react)编写自定义组件，但是否可以安装React NPM包并使用它的组件？我用ChakraUI试了一下： import { Switch } from "@chakra-ui/react"; <Switch

浏览 21提问于2021-10-20得票数 0

回答已采纳

1回答

如何在Chakra* UI元素中添加::-webkit-scrollbar伪元素？(React)*

html、css、reactjs、chakra-ui

我正在使用Chakra UI，我需要使用css伪元素::-webkit-scrollbar来自定义滚动条样式，但是Chakra UI没有看到这个伪元素，我不知道在不创建全局css类的情况下在哪里可以设置这个特定组件的样式下面是我的代码示例： <Box maxW="100vw" h=&qu

浏览 39提问于2020-11-28得票数 3

回答已采纳

1回答

如何将脉轮-ui样式应用于自定义组件？(反应-数据报警器)

reactjs、react-datepicker、chakra-ui

我想通过Chakra样式为我的Datepicker组件定义样式。} from '@chakra-ui/react';我使用chakra工厂函数可以通过支持为StyledDatepicker提供一些样式，如上面的代码所示，但是我想在一个单独的样式.ts文件

浏览 5提问于2022-02-15得票数 1

回答已采纳

1回答

React/Gatsby/Chakra* UI中的窗口*

reactjs、gatsby、chakra-ui

我有一个使用React，Gatsby和Chakra UI框架的简单web应用程序。这个应用程序由一个索引页组成，它从1000+ mdx文件中查询头条，并呈现一个最小的摘要组件，其中有5个来自头条的字段和一个指向每个字段的详细页面的链接。1000+详细页面是使用createPage在gatsby-node.js中生成的。索引页面使用map遍历每个mdx节点，并<e

浏览 0提问于2021-10-05得票数 1

1回答

CHAKRA-UI:如何用一个道具显示多个道具样式值？

javascript、css、reactjs、chakra、chakra-ui

我是第一次使用Chakra UI，但找不到解决方案，这肯定是一件简单的事情。在Chakra的样式道具文档中，它们为边框样式提供了以下内容(https://chakra-ui.com/docs/features/style-props#borders) Prop有没有一种方法可以简单地添加border属性来设置宽度、样式、颜色等？我看

浏览 10提问于2021-01-06得票数 0

3回答

带有Next.js抛出错误的Chakra* UI设置*

next.js、chakra-ui

我希望得到一个简单的Next.js应用程序的脉轮UI设置(最新的V1)。在执行了https://chakra-ui.com/docs/getting-started上的“入门”步骤后，我在运行开发服务器时遇到了以下错误： error - ./node_modules/@chakra-ui/portal/dist/esm/

浏览 29提问于2021-01-11得票数 2

2回答

用于React的脉轮用户界面:更改_focus borderColor不工作

javascript、reactjs、chakra-ui

我在Chakra上设置了默认主题，以便使用extendTheme()进行反应。当我试图像这样更改Select的样式时，_focus样式没有应用，而color的行为与预期一样。参考文献代码import { extendTheme } from '@chakra-ui/react'; import { Select

浏览 0提问于2021-11-19得票数 2

回答已采纳

2回答

重写Box的主题CSS

react-native、chakra-ui

我试图开发一个应用程序的前端，我想要主题一些框。我从中拿出了一个例子import { extendTheme } from "@chakra-ui/react" componentsunderline", } },

浏览 2提问于2021-10-14得票数 0

回答已采纳

1回答

无法解析依赖树Chakra* UI*

reactjs、chakra-ui

peer react@">=18" from @chakra-ui/system@2.3.0npm ERR!peer @chakra-ui/system@">=1.0.0" from @chakra-ui/checkbox@1.7.1 npm ERR!我尝试过许多不同<e

浏览 11提问于2022-10-27得票数 0

1回答

带有Chakra* UI的主字体和次字体*

javascript、reactjs、fonts、styling、chakra-ui

我正在使用Chakra Ui with React，我试图为两个组件使用两种不同的字体，我已经使用docs中描述的全局方法导入了它们，但是如何只使用当前组件中的辅助字体呢？

浏览 11提问于2021-12-19得票数 0

回答已采纳

2回答

/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.esm.js 238中的错误:11-22

reactjs、chakra-ui

我安装了脉轮ui，在使用ChakraProvider组件时，我会得到以下错误。 

浏览 11提问于2022-05-14得票数 0

回答已采纳

1回答

如何在TailwindCSS和Chakra* UI之间混合*

reactjs、tailwind-css、chakra-ui

谁能回答我是否在ReactJS中混合使用TailwindCSS和Chakra UI？样式类名称之间是否存在冲突？

浏览 73提问于2021-09-22得票数 0

1回答

有没有办法编写一个自定义的React组件来接受Chakra* UI风格的道具？*

reactjs、chakra-ui

import { FormControl, FormLabel, Input } from '@chakra-ui/react' import { CustomTextInput } from '.() => {

浏览 24提问于2021-07-20得票数 0

1回答

故事书找不到基于chakra-ui的组件。

reactjs、configuration、storybook、chakra-ui

我在尝试故事书和脉轮ui。下面是我如何构造我的文件夹，module.exports = { "../src/**/*.stories.mdx", "@storybook/addon-essentials", "@

浏览 1提问于2020-09-12得票数 1

1回答

如何使脉轮ui组件使用next/image自动优化照片？

reactjs、next.js、chakra-ui

在这个片段中，我使用了“阿凡达”组件，但是在站点中没有像next/image那样自动优化图像 const { colorMode, toggleColorMode

浏览 5提问于2021-08-13得票数 8

点击加载更多