Lots of errors and warnings keep coming when I add any Grommet component.
I tried to fix with StyleSheetManager but always a new error occurs. What could be wrong? Thank you
I'm using following depencies:
"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>
)
ERRORS and WARNINGS with this code:
1. StyledComponent.ts:162 styled-components: it looks like an unknown prop "responsive" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)
2. Warning: React does not recognize the `directionProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `directionprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
3. react-dom.development.js:86 Warning: Received `true` for a non-boolean attribute `responsive`.
If you want to write it to the DOM, pass a string instead: responsive="true" or responsive={value.toString()}.
Tried to start React project with Grommet and styled-components
styled components v6 will be supported by Grommet at version 2.35.0 see https://github.com/grommet/grommet/releases/tag/v2.35.0-alpha.1. But i also get not work with 2.35.0... anyway with 2.34.x you will have no chance i guss