Expanding Material UI functionality across various packages within a monorepository

Currently, I am using lerna to develop multiple UI packages.

In my project, I am enhancing @material-ui/styles within package a by incorporating additional palette and typography definitions. Although I have successfully integrated the new types in package a, package b - which consists of components utilizing material-ui's components and makeStyles function - does not recognize these new types.

Despite installing package a in package b and attempting to import the module within the file where styles are created, I have not been able to resolve this issue. Additionally, specifying the "path" for material-ui in package b's tsconfig did not provide any solutions.

If I try to directly import package a into package b, will that potentially resolve the problem?

Has anyone encountered a similar challenge and found a successful resolution?

Due to working on a private repository, sharing it is not feasible. However, I can supply another demonstration repository showcasing the problem if necessary.

typescriptmaterial-uilernamodule-augmentation

Answer №1

After some troubleshooting, I successfully resolved the issue by extracting material-ui's theme from the file where I customized it in package a, and then exporting it outside of the package. To ensure that package b recognized the additional types, all I needed to do was specify the path in the tsconfig file.

Answer №2

Facing the same issue as the original poster (OP), I turned to OP's solution for guidance, although I found it somewhat difficult to grasp.

This is how I managed to resolve it:

Within a TypeScript file in package A:

declare module "@mui/material/styles" {
  interface Palette {
    brand: PaletteColor;
  }

  interface PaletteOptions {
    brand?: PaletteColorOptions;
  }
}

In package B's tsconfig.json file:

{
  "compilerOptions": {
    ...  
    "paths": {
      "@mui/material/*": [
        "./node_modules/package-a/*",
        "./node_modules/@mui/material/*"
      ]
    }
  }
}

Remember that you might need to restart your TypeScript server or IDE for the changes to take effect.

Answer №3

To resolve the problem, I resolved it by incorporating the file using Module Augmentation in the project that consumes it.

Simply include this line in your consuming project:

import "@my-package/theme/base";

In the file src/theme/base.ts

declare module "@mui/material/styles" {
  interface Theme {...}
}

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

Customizing Icons in ExpansionPanelSummary Expansion

I am using an ExpansionPanelSummary with an expandIcon set to an Add icon. When clicked, the icon rotates as expected because it is native to the ExpansionPanelSummary component. However, I want the Add icon to change to a Remove icon when clicked, which ...

reactjsmaterial-ui

Modifying an element's value according to user input: Step-by-step guide

Within my dropdown menu, there is a single option labeled "Others". Upon selecting this option, a textbox appears allowing me to input custom text. Is it possible to dynamically update the value of the <option value="Others">Others</option>, ...

javascripthtmltypescript

Blurry text issue observed on certain mobile devices with Next.js components

There continues to be an issue on my NextJS page where some text appears blurry on certain mobile devices, particularly iPhones. This problem is only present on two specific components - both of which are interactive cards that can be flipped to reveal the ...

reactjstypescriptnext.jstailwind-cssframer-motion

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

javascripttypescripteslintreact-scripts

Refactor the fat arrow function in Typescript to maintain the bare function signature verification

When using AOT in Angular, it is necessary to rewrite all functions and reducers to not utilize arrow functions: An error occurred: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function o ...

angulartypescriptngrxreducers

MUI: tips for positioning text next to each other on a page

I need assistance aligning numbers and text side by side, similar to the image shown here: https://i.sstatic.net/gXzOM.jpg However, there is a margin to the right of the text(MASTER I 406), causing the numbers to not be in the correct position. Currently, ...

cssreactjsmaterial-ui

When incorporating Papaparse with Angular 2, encountering the issue "Identifier 'Papa' is not found" may arise

Currently, I am facing an issue in my project where after deleting and re-installing node_modules to resolve errors, the definition of 'Papa' is missing. As a result, when npm updated the node modules again, Angular 2 is unable to find 'Papa ...

angulartypescriptpapaparse

Can you identify the specific function type passed through props?

interface IProps { handleCloseModal: React.MouseEventHandler<HTMLButtonElement> returnFunction: () => void; } export default function Modal({ children, returnFunction, handleCloseModal, }: React.PropsWithChildren<IProps>) { cons ...

reactjstypescript

Different return types of a function in Typescript when the parameter is either undefined or its type is explicitly asserted vary

Addressing Complexity This code may seem simple, but the use case it serves is quite complex: type CustomFunction = <B extends ['A']>( param?: B ) => B extends undefined ? 'TYPE_1' : 'TYPE_2' // Usage examples: co ...

typescripttypescript-typings

Guide to setting headers to application/json in Angular 2

I've been attempting to send an HTTP post request in Angular 2, but I'm facing difficulties setting the headers to content type application JSON. This is my current code: login(url, postdata) { var headers = new Headers({'Content-Type&a ...

angulartypescriptpostheader

having difficulties sorting a react table

This is the complete component code snippet: import { ColumnDef, flexRender, SortingState, useReactTable, getCoreRowModel, } from "@tanstack/react-table"; import { useIntersectionObserver } from "@/hooks"; import { Box, Fl ...

reactjstypescriptreact-table-v8

A guide on transforming a 1-dimensional array into a 2-dimensional matrix layout using Angular

My query revolves around utilizing Template (HTML) within Angular. I am looking for a way to dynamically display an array of objects without permanently converting it. The array consists of objects. kpi: { value: string; header: string; footer: string }[] ...

htmlangulartypescript

Making if-else statements easier

Greetings! I have a JSON data that looks like this: { "details": { "data1": { "monthToDate":1000, "firstLastMonth":"December", "firstLa ...

javascripttypescriptif-statementhighchartslodash

Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Our project is designed to be compatible with both Cordova and Electron, using a single codebase. This means it must import Node APIs and modules specific to Node for Electron, while ignoring them in Cordova. Previously, we relied on a custom webpack con ...

angulartypescriptionic-frameworkwebpackelectron

Whenever attempting to choose a rating, the MUI dialog continuously refreshes and resets the selected rating

I'm facing an issue with my MUI dialog where it keeps refreshing and resetting the selected rating every time I try to rate a movie. Any assistance on this matter would be highly appreciated. The RateWatchMovieDialog component is designed to display ...

javascriptreactjsmaterial-ui

Navigating with multiple parameters in Angular 7 routing

I am currently facing an issue where I need to navigate to the same component with different parameters. Although I can subscribe to the params through the ActivatedRoute, I'm encountering a problem when trying to call router.navigate within the subsc ...

angulartypescript

Why does the server attempt to load the chart in Angular 10 Universal using Amcharts 4?

I have experience with Angular, but I am now delving into the world of using Universal for SEO purposes. My goal is to integrate a map from amcharts 4, which works fine without Angular Universal. However, I am facing an issue where the server attempts to ...

angulartypescriptangular9angular-universalamcharts4

Implementing indexers in TypeScript to accommodate both string and numeric keys

Seeking to incorporate different types into existing code. In the code, there exists a transitionData object in which objects can be added by index as shown below: this.transitionData[id] = transition where id is a number and transition is of type Trans ...

typescript

How to properly import and use a MaterialUI theme from a separate file

Hey there, I'm currently exploring MaterialUI and React. One thing I'm attempting to do is import a theme from another file and toggle between themes using a switch in MaterialUI. To accomplish this, I've created a Layout component that will ...

reactjsmaterial-ui

Exploring async componentDidMount testing using Jest and Enzyme with React

angular:12.4.0 mocha: "8.1.2" puppeteer: 6.6.0 babel: 7.3.1 sample code: class Example extends Angular.Component<undefined,undefined>{ test:number; async componentWillMount() { this.test = 50; let jest = await import('jest&apos ...

reactjstypescriptjestjsenzyme