索环、反应和样式组件的错误

问题描述 投票：0回答：1

当我添加任何索环组件时，不断出现大量错误和警告。

我尝试使用 StyleSheetManager 进行修复，但总是出现新的错误。可能出什么问题了？谢谢你
我正在使用以下依赖项：

  "dependencies": {
    "grommet": "^2.34.2",
    "grommet-icons": "^4.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.3",
    "styled-components": "^6.1.8"
  },

import { NavLink } from 'react-router-dom'
import styled from 'styled-components';

import { Button, Box } from 'grommet'

const Menu = () => {
  return (
  
      <Box>
        <NavLink to="recipes">RECIPES
        </NavLink>
        <NavLink to="addrecipe">ADD RECIPE</NavLink>
        <NavLink to="generator">RECIPE GENERATOR</NavLink>
      </Box>

  )
}

export default Menu

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <title>Vite + React</title>
    <style type="text/css">
      body { margin: 0 }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import { Grommet } from 'grommet';
import ReactDOM from 'react-dom/client'
import App from './App'
// import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// import { NotificationContextProvider } from './context/NotificationContext'
// import { UserContextProvider } from './context/UserContext'
import { BrowserRouter } from 'react-router-dom'

const customTheme = {
  global: {
    colors: {
      'light-2': '#f5f5f5',
      'text': { light: 'rgba(0, 0, 0, 0.87)', },
    },
    font: {
      family: 'Roboto',
      size: '14px',
      height: '20px',
    },
  },
};

ReactDOM.createRoot(document.getElementById('root')).render(
    <Grommet theme={customTheme} >
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Grommet>
)

此代码的错误和警告：
1. StyledComponent.ts:162 styled-components：看起来一个未知的 prop“responsive”正在被发送到 DOM，这可能会触发 React 控制台错误。如果您想自动过滤未知的 props，您可以通过 `` 选择该行为（连接像 `@emotion/is-prop-valid` 这样的 API）或考虑使用瞬态 props（自动过滤的 `$` 前缀.)

2.警告：React 无法识别 DOM 元素上的 `directionProp` 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写的“directionprop”。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

3. react-dom.development.js:86 警告：收到非布尔属性“responsive”的“true”。

如果要将其写入 DOM，请传递一个字符串：responsive="true" 或responsive={value.toString()}。

尝试使用 Grommet 和样式组件启动 React 项目

javascript reactjs styled-components grommet
1个回答
0
投票

Grommet 版本 2.35.0 将支持 v6 样式组件，请参阅 https://github.com/grommet/grommet/releases/tag/v2.35.0-alpha.1。但我也无法使用 2.35.0...无论如何，使用 2.34.x 你将没有机会我猜

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.