gatsby 相关问题

将 Mailchimp 与 Gatsby 和 Strap 集成时出现 CORS 策略错误

我在尝试将 Mailchimp 与我的 Gatsby 项目集成时遇到 CORS 策略错误。错误消息指出：“已被 CORS 策略阻止：没有‘Access-Control-Allow-Origin’他...

Framer-motion 覆盖 React-Bootstrap

我正在构建一个使用 gatsby/react/react-bootstrap/framer-motion 的网站。我遇到了framer-motion 覆盖我的react-bootstrap css 的问题？我不想重新设计所有的响应能力......

使用 GatsbyJS 动态导入

我们有一个大型的 GatsbyJS 3 (React) 项目，用于构建多个网站。 每个网站都使用特定的环境文件构建，然后上传到不同的位置。 网站...

您不能将 childImageSharp 与

自从我更新了我的 gatsby 依赖项后，我在构建过程中收到了“childImageSharp”错误： 您不能将 childImageSharp 与 2021-06-10-test.md.md 一起使用 — 使用 publicURL 代替...

“如何为现有 React 项目的单个页面安装 Tailwind CSS？”

我需要帮助将 Tailwind CSS 集成到现有的 React 项目中，而不替换现有的 style.css。我只想将 Tailwind CSS 应用于我正在创建的新“联系我们”页面....

运行 Gatsy 开发时无法访问 REST API

我想创建一个 Gatsby 应用程序，调用我的 Azure SQL 数据库的 REST API 来读取数据。 在我部署的 Azure 静态 Web 应用程序 (SWA) 中，访问工作正常，但在“Gatsby 开发”模式下则不然。 ...

Gastby React 不强制执行任何打字稿

我现在正在做一个非常新鲜的项目。 它是盖茨比反应/打字稿。 虽然我的 IDE 正在识别并显示打字稿错误，但代码正在编译和运行，但没有...

如何在主要特色产品图片下方显示附加图像缩略图

我无法从 Moltin API 获取文件以显示在主产品图片下。 我正在使用此存储库：https://github.com/moltin/gatsby-demo-store 并将 @moltin/gatsby-source-moltin 更新到 1.3.1。我...

Gatsby - 冲突的对等依赖：使用 eslint-config-react-app 和 @typescript-eslint/eslint-plugin

我正在使用 gatsby (5.12.3)。我发现它依赖于 "@typescript-eslint/eslint-plugin": "^5.60.1" 和 "eslint-config-react-app": "^6.0.0", &q...

错误#98123 WEBPACK.BUILD-JAVASCRIPT 构建 gatsby 网站时生成 JavaScript 包失败

我一直在尝试构建我的盖茨比网站，但构建失败并出现错误，如下所示 构建生产 JavaScript 和 CSS 包失败 - 7.408s 错误 #98123 WEBPACK.BUILD-JAVASCRIPT 正在生成

GraphQL 就像 Next.js 中的 Gatsby

我的问题是有没有办法像 Gatsby 一样在 Next.js 中设置 Graphql。 这样我就可以查询页面并从中获取数据。 Next.js 是否有像 Gatsby-file-sour 这样的插件...

如何在gatsby/react中获取JSON-File的子节点

我想基于gatsby框架创建Azure Static Web App。我对 gatsby/react/javascript 开发很陌生。 我在 gatsby-node.js 文件中通过 axios 创建了一个 GET-Request。 常量 getBlogs =

Gatsby MDXRenderer：错误元素类型无效：需要字符串

我一直在使用 gatsby 开发一个简单的 wiki 风格的静态页面。 版本： “依赖项”：{ "@mdx-js/react": "^2.0.0", "盖茨比": "^5.13.2&q...

“gatsby build”在 Github Actions 上产生不同的结果

我正在尝试将 gatsby 构建和部署过程自动化到 git Push 上的 github 页面，但遇到了问题。 长话短说 在我的本地计算机（Windows 11）上使用yarn build（= gatsby build）构建网站...

如何将 /@{username} 格式的所有页面路由到模板页面？ - Gatsby.js

我刚刚使用 Gatsby.js 创建了一个网站，并希望我的用户能够通过在我的网站 URL 后面添加“@”符号并后跟他们的用户名来访问他们自己的个人资料页面（example.com/@

Facebook 的 OG 抓取工具使用的图像与我的 OG 标签中的图像不同

我正在使用 Gatsby 构建一个 React 应用程序，并使用 React Helmet 插件来插入元数据。我刚刚配置了所有开放图谱和 Twitter 标签，但它们没有使用我指定的图像。 对于

为什么 gatsby-plugin-image 缺少 image 属性？

编者注：这个问题对于大多数搜索 [gatsby-plugin-image] Missing image prop 错误的人来说可能没有帮助。作者在下面回答了他自己的问题 https://stackoverflow.com/a/

类型错误：使用 gatsby-image 时无法读取 null 的属性“childImageSharp”

我正在尝试使用 Gatsby 图像，但出现 Cannot read property 'childImageSharp' of null。我找不到错误在哪里。 Topsection.js 是一个底层组件。 image.jpg 位于 src/images/

类型错误：无法读取 null 的属性“childImageSharp”

我正在尝试使用 Gatsby 图像，但出现 Cannot read property 'childImageSharp' of null。我找不到错误在哪里。 Topsection.js 是一个底层组件。 image.jpg 位于 src/images/

如果在 Material UI 中选择了 FormControlLabel，如何设置它的背景颜色？

如果我有一个RadioGroup并且想要将选中的单选按钮的背景颜色设置为另一种颜色，我该如何在Material UI中执行此操作？在文档中找不到任何内容。 如果我有一个 RadioGroup 并且想要将选中的单选按钮的背景颜色设置为另一种颜色，我该如何在 Material UI 中执行此操作？在文档中找不到任何内容。 <FormControlLabel key={key} value={value} control={<Radio />} label={label} /> 如果我尝试下面的代码，只有单选按钮本身的背景颜色为黑色，而不是整个标签。 <FormControlLabel key={obj.value} value={obj.value} control={ <Radio sx={{ '&.Mui-checked': { backgroundColor: 'black', }, }} /> } label={obj.label} /> 实际上，我在文档中找到了一些有用的信息。 通过使用 useRadioGroup() 钩子，我们可以更好地控制单选组的外观。 受到文档中示例的启发，我找到了您问题的解决方案。 现场演示： 代码： import * as React from "react"; import RadioGroup, { useRadioGroup } from "@mui/material/RadioGroup"; import FormControlLabel, { FormControlLabelProps } from "@mui/material/FormControlLabel"; import Radio from "@mui/material/Radio"; function MyFormControlLabel(props: FormControlLabelProps) { const radioGroup = useRadioGroup(); let checked = false; if (radioGroup) { checked = radioGroup.value === props.value; } if (checked) return ( <FormControlLabel sx={{ backgroundColor: (theme) => theme.palette.primary.light }} checked={checked} {...props} /> ); return <FormControlLabel checked={checked} {...props} />; } export default function UseRadioGroup() { return ( <RadioGroup name="use-radio-group" defaultValue="first"> <MyFormControlLabel value="first" label="First" control={<Radio />} /> <MyFormControlLabel value="second" label="Second" control={<Radio />} /> </RadioGroup> ); } 通过 Mui 示例文档和之前的答案进行一些调整，您可以通过更改您要引用的类来更改所选单选按钮的背景。 在 Mui Docs 示例中，他们通过引用 ".MuiFormControlLabel-label" 来更改文本的颜色 const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)( ({ theme, checked }) => ({ '.MuiFormControlLabel-label': checked && { color: theme.palette.primary.main, }, }), ); 使用 "&.MuiFormControlLabel-root" 来访问背景和文本。 const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)( ({ theme, checked }) => ({ '&.MuiFormControlLabel-root': checked && { //changing text color color: theme.palette.primary.main, //changing background color and shape backgroundColor: "#d3d3d3", borderRadius: "15px", }, }) ); 全面实施： import * as React from "react"; import { styled } from "@mui/material/styles"; import RadioGroup, { useRadioGroup } from "@mui/material/RadioGroup"; import FormControlLabel from "@mui/material/FormControlLabel"; import Radio from "@mui/material/Radio"; constStyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)( ({ theme, checked }) => ({ '&.MuiFormControlLabel-root': checked && { //changing text color color: theme.palette.primary.main, //changing background color and shape backgroundColor: "#d3d3d3", borderRadius: "15px", }, }) ); function MyFormControlLabel(props) { const radioGroup = useRadioGroup(); let checked = false; if (radioGroup) { checked = radioGroup.value === props.value; } return <StyledFormControlLabel checked={checked} {...props} />; } export default function UseRadioGroup() { return ( <RadioGroup name="use-radio-group" defaultValue="first"> <MyFormControlLabel value="first" label="First" control={<Radio />} /> <MyFormControlLabel value="second" label="Second" control={<Radio />} /> </RadioGroup> ); } 如果您在移动到另一个页面后保留 RadioGroup 的状态（例如用例：用户想要在多页面表单上回溯）。然后，此解决方案将在渲染时将您的自定义样式绑定到您的 RadioGroup 状态。