Why theme is not being applied?

WangLarry commented 2 years ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡

I try to extract general components into a new module. But the final result is that theme is not applied to these component.

tsup config:

export default defineConfig({
clean: true,
dts: {
entry: {
  index: "src/index.tsx",
  TypescriptEditor: "src/TypescriptEditor.tsx",
  JsonEditor: "src/JsonEditor.tsx",
  MonacoEditor: "src/MonacoEditor.tsx",
},
},
entry: [
"src/index.tsx",
"src/TypescriptEditor.tsx",
"src/JsonEditor.tsx",
"src/MonacoEditor.tsx",
],
external: ["react"],
format: ["esm"],
minify: isProduction,
sourcemap: true,

package.json:

"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module",
"files": [
"dist/*"
],
"exports": {
".": "./dist/index.js",
"./dist/TypescriptEditor.js": "./dist/TypescriptEditor.js",
"./dist/JsonEditor.js": "./dist/JsonEditor.js",
"./dist/MonacoEditor.js": "./dist/MonacoEditor.js"
},

components: MapEntriesEditor.tsx, TypescriptEditor.tsx, JsonEditor.tsx, MonacoEditor.tsx, .....
MapEntriesEditor does not use theme in toolpad. Function-datasource client use MapEntriesEditor, the. following picture show height is more taller, not use small size in theme.

others functions of component work well, just face this problem now

Examples 🌈

No response

Motivation 🔦

No response

WangLarry commented 2 years ago

This is more clear:

// Create a theme instance.
const theme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        size: "small",
        variant: "filled",   <<-------- added
      },
    },
....

 palette: {
     primary: {
      main: "#e91e63",  <<----  // pink, original: "#556cd6",
    },

It's strange primary color is applied, MuiTextField's props is not

Janpot commented 2 years ago

@WangLarry Before you pour a lot of effort into this, for now our general strategy will be to develop our Toolpad specific components inside the src/components folder and keep it there, this keeps the development cycle short. If we find that the MUI community expresses a need for having any of these components, we may think about promoting them to MUI (or MUI X).

(btw, your specific problem here looks like you're not externalizing @mui/material packages)

WangLarry commented 2 years ago

@Janpot I agree with you. What I do now is to get familiar with the code as soon as possible and learn from the modification. :)

Janpot commented 2 years ago

Closing this as there is no action required from the Toolpad team

mui / toolpad