Style and imports error when using Material UI

[lcastiglione]

Describe the bug Here’s how the CircularProgress component is being loaded:

import reflex as rx


class CircularProgress(rx.Component):
    library = "@mui/[email protected]" 

    tag = "CircularProgress" 

    value: rx.Var[int]
    determinate: rx.Var[str]
    size: rx.Var[str]


circular_progress = CircularProgress.create

And it's being used like this:

circular_progress(
    value=State.progress,
    variant="determinate",
    size="30px"
)

When the application is loaded in the browser, the following error message appears:

Module not found: Can't resolve '@emotion/styled'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mui/system/esm/index.js
./node_modules/@mui/material/zero-styled/index.js
./node_modules/@mui/material/CircularProgress/CircularProgress.js
./node_modules/@mui/material/CircularProgress/index.js
__barrel_optimize__?names=CircularProgress!=!./node_modules/@mui/material/index.js
./pages/index.js

After installing @emotion/styled as indicated in the error message, the circular loading bar appears, but it disrupts the styles across the entire application. Issues include:

• Background colors are added to buttons that were supposed to be transparent.
• Components separated by rx.desktop_only and rx.mobile_and_tablet are displayed simultaneously, overlapping regardless of the device type.

This indicates that adding @emotion/styled is causing style conflicts, likely due to mismatched dependencies or unexpected overrides in the styling system.

To Reproduce

Expected behavior The styles of Material UI components should not affect the styles of other components in the application (Radix)

Screenshots Before adding CircularProgress from Material UI:

Desktop:

Mobile:

After adding CircularProgress from Material UI

Specifics (please complete the following information):

• Python Version: 3.11.8
• Reflex Version: 0.6.4
• OS: WSL2 Debian - Windows 11
• Browser (Optional): Chrome/Firefox

Additional context

• Happens with any Material UI component.
• The blue circle with the "Upload" label should appear only when a file is dragged into the window, but after adding a Material UI component, it remains fixed as shown in the images.

Thanks!!

[linear[bot]]

ENG-4138 Style and imports error when using Material UI

[lcastiglione]

I tried adding the dependencies like this:

lib_dependencies: list[str] = ["@mui/utils", "@emotion/styled", "@emotion/react"]

as mentioned here, but it didn't work either.

Additionally, with every change I made, I stopped the Reflex server, deleted the .web folder, and restarted everything from scratch, but I still didn't get any results.

[Ernelene]

I had the same error then I imported it as a custom component. (Its also easier to debug the react in your console) I needed the tree view from mui. https://reflex.dev/docs/wrapping-react/guide#local-components

In "/public/materialUI" is just the react component under your assets folder with the same name as your tag in reflex.

class MUI(rx.NoSSRComponent):
    library = "/public/materialUI"
    tag = "MUIApp"
    items: rx.Var[str]
    is_default = True
    selected_item : rx.Var[str]
    lib_dependencies: list[str] = [
        "@mui/x-tree-view",
        "@mui/styles"] 
    
    on_selected_items_change: rx.EventHandler

    def get_event_triggers(self) -> Dict[str, Any]:
        return {
            **super().get_event_triggers(),
            "on_selected_items_change": lambda id: [id],
        }

mui_comp = MUI.create

React code:

import React, { useState, useEffect, useRef } from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
import { unstable_useTreeItem2 as useTreeItem2 } from '@mui/x-tree-view/useTreeItem2';
import SvgIcon from '@mui/material/SvgIcon';
import { Icon } from '@iconify/react';
 
const theme1 = createTheme({
    spacing: 8,
});

......
const MUIApp = ({ items, onSelectedItemsChange, selectedItem: initialSelectedItem }) => {
    const [parsedItems, setParsedItems] = useState([]);
    const [expandedItems, setExpandedItems] = useState([]);
    const [selectedItem, setSelectedItem] = useState(initialSelectedItem);

 .............
    return (

        <ThemeProvider theme={theme1}>
            <RichTreeView
                items={parsedItems}
                selectedItems={[selectedItem]}
                onSelectedItemsChange={handleSelectedItemsChange}
                expandedItems={expandedItems} // Control expanded nodes
                ref={treeViewRef} // Reference to manage programmatic operations
                onExpandedItemsChange={handleExpandedItemsChange}

                slots={{           // Custom icon for end of the item
                    item: CustomTreeItem         // Custom TreeItem2 with custom functionality
                }}
                slotProps={{
                    item: (itemData) => ({
                        ownerState: { ...itemData, type: itemData.type },
                    }),
                }}
            />
        </ThemeProvider>
    );
};

export default MUIApp;

There may be better ways to do it but this worked for me.