The data type 'string' cannot be assigned to the type 'SystemStyleObject | undefined' in the context of Next.js and Chakra UI

I am currently working on a project that involves Next.js, TypeScript, and Chakra UI. While configuring Button themes in the button.ts file, I encountered an error related to the baseStyle object for properties like borderRadius, color, and border:

Type 'string' is not assignable to type 'SystemStyleObject | undefined'.

Below is the relevant code snippet causing the issue:

import { ComponentMultiStyleConfig } from "@chakra-ui/theme";

export const Button: ComponentMultiStyleConfig = {
    baseStyle: {
        borderRadius: "60px",
        color: "brand.100",
        border: "2px solid red",
    },
};

Link to image showing the error

The styles defined here are not being applied to the main file as expected.

Despite consulting the documentation, I have been unable to find a solution to this issue.

Edit: In the latest version(v2.4.9) of Chakra UI, the usage has changed from ComponentMultiStyleConfig to just useMultiStyleConfig. After thorough research and watching tutorials, I was able to resolve the problem. Thank you!

reactjstypescriptnext.jseslintchakra-ui

Answer №1

It seems that the way you are utilizing the styles is not quite correct. It appears that you are attempting to style different parts of components using this approach. According to the TypeScript definition provided:

export interface ComponentMultiStyleConfig {
  parts: string[]
  baseStyle?: PartsStyleInterpolation
  sizes?: Record<string, PartsStyleInterpolation>
  variants?: Record<string, PartsStyleInterpolation>
  defaultProps?: ComponentDefaultProps
}

In the code snippet above, the parts property is required. You are passing parts as an array of strings and then defining the style for those parts in the baseStyle. To properly implement this, it should look something like:

export const Button: ComponentMultiStyleConfig = {
  baseStyle: {
    icon: {
      borderRadius: "60px",
      color: "brand.100",
      border: "2px solid red",
    },
    parts: ["icon"],
  },
};

If you follow this structure, you may encounter a TypeScript error related to the type of parts. However, there is currently an open issue on the GitHub repository addressing this.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting the Speed Problem Between NextJs and GTM

After successfully integrating GTM into my NextJs project, I noticed a significant drop in my lighthouse performance score. Previously, I was scoring 96 but now I am only at 38. Is there a more efficient way to integrate GTM without negatively impacting th ...

reactjsnext.jsgoogle-tag-managerlighthouse

Tips for Customizing the Width of Your Material UI Alert Bar

At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...

javascriptcssreactjstypescriptmaterial-ui

How to access type properties in typescript without using the "this" keyword

Below is a snippet of code that I am working with: class Player implements OthelloPlayer { depth; constructor(depth: number) { this.depth = depth; } getMove(state: OthelloState) { return this.MinimaxDecision(stat ...

typescript

Creating a list of React components on the server side

Just encountering a minor issue with my Express server: app.get('/', function(req, res) { res.send(ReactDOMServer.renderToString(React.createElement(App))); }); However, an error occurs when I use the following code: this.posts = positions. ...

reactjsexpressserver-side-rendering

Learn the proper way to write onClick in tsx with Vue 2.7.13

current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...

javascripttypescriptvue.jsvuejs2tsx

Looking to implement a load more feature in Next.js to fetch additional data? Learn how to create a load more button for pagination using Next

Is there a way to load more data in next.js by clicking on the Load More button? Currently, I am using getServerSideProps to fetch data from an API for this page. Here is my page code: export default function Posts({ posts, popular }) { const classes = ...

reactjsnext.js

By utilizing custom typeRoots while continuing to export these types alongside the entry point

For my project setup, I employ rollup to bundle an associated index.d.ts (and index.js) for the entrypoint src/index.ts. Within the project structure, there exists a directory named src/types containing multiple .d.ts files. These types are globally acces ...

typescriptnpmrollupjs

Displaying error messages in React Hook Form when passing state

After reviewing the responses below, I have updated my code as follows: import { useState } from "react"; import Head from "next/head"; import Link from "next/link"; import Image from "next/image"; import Background ...

reactjsformsnext.jsreact-hook-form

What is the process for creating a unit test case for a button's onClick event with Jest?

In my attempt to unit test the onClick event of a button in a component, I encountered some challenges. Specifically, I am unsure how to properly test the onClick event when it triggers a function like Add(value). App.js function App(){ const[value,set ...

javascriptreactjsunit-testingjestjs

Managing authentication within getStaticProps requests

I am working on integrating a NextJs application with its backend in Laravel. Currently, all of our API routes in Laravel are secured using Laravel Sanctum to enhance security and prevent cross-site scripting attacks. One challenge I am facing is that th ...

reactjsnext.js

Just dipping my toes into the world of backend development and diving into the intric

Hi everyone, I've been working on coding for a little over a year now and have mainly focused on frontend technologies like JavaScript, various frameworks, CSS, and HTML. Just yesterday, I encountered the notorious CORS issue with the Spotify API. Ev ...

node.jsjsonreactjsapiexpress

NextJS - Error: Invalid JSON format, starting with a "<" symbol at position 0

After following a tutorial on NextJS, I attempted to make some modifications. My goal was to include the data.json file on the page. However, I kept encountering the error message "Unexpected token < in JSON at position 0." I understand that I need to con ...

jsonreactjsnext.js

Guide to displaying loading progress during server response delay in React with TypeScript

I need to find a way to update the loading state to false once the server responds. The challenge is that the response occurs in one component, while the progress bar is located in another. To illustrate the scenario: const Form: React.FC = () => { ...

reactjstypescript

Encountering a 404 Error while using my Next.js 13 API Route

I recently forked a project and attempted to set up an API Endpoint for my CRUD operations with a database. However, I encountered difficulties in accessing my endpoint. Even with a test on a dummy API https://jsonplaceholder.typicode.com/todos, I still re ...

node.jsrestnext.js

react-select seems to have a glitch where only the first option is rendering, but it is not visible. Additionally, when I try to select an option, the entire array seems to be disappearing

My backend is providing me with an array of flavors. This is how I am using it in my jsx: <div className="mb-3"> <Select options={flavorOptions} onChange={onSelectOption} value={flavor} /> </div> I have formatted the ...

reactjsreact-select

Implement admin-on-rest framework within my current project

Currently, I am in the process of building an admin-tool website using Material UI. To handle asynchronous calls, I have integrated Redux Saga into my project for calling services. The Admin on Rest framework offers some beneficial components like the Data ...

javascriptreactjsgridmaterial-uiadmin-on-rest

Discussing the size of windows within React Material-UI's makeStyles framework

When I create a custom style for a specific component, my const declaration typically looks like this: const useStyles = makeStyles((theme: Theme) => createStyles({ screen: { margin: 0, padding: 0 }, surface: { backgroun ...

reactjsmaterial-ui

Navigate within a single component on the Stack by scrolling

I'm a huge fan of CSS! Although it may seem like a simple task, I am completely stumped on how to tackle it. Mission: My goal is to enable scrolling only within the List section without affecting the entire page. Here's the structure of my ...

cssreactjsmaterial-ui

Choose a dropdown menu that will show a specific text instead of the actual value

I am currently developing a project that relies on react and redux for implementation. My goal is to have the SelectField component show a string to users, but select the ID value when an option is chosen. With the use of material-ui 0.19.3v, I was able ...

reactjsreduxmaterial-ui

Is it possible for the background component to unmount when the modal is open in a React application? If not, what is the best way to preserve and manage the states of both

Check out this demo for file structure reference (please note it is currently not working): https://codesandbox.io/s/material-demo-bsr06 I am looking to implement functionality where clicking something in the URL dashboard/someMails should open a Mod ...

reactjsreduxreact-routermodal-dialogmaterial-ui