[TreeView] Migrate TreeItem to emotion

[siriwatknp]

• I have followed (at least) the PR section of the contributing guide.

One chunk of #24405

[mui-pr-bot]

Details of bundle changes

@material-ui/lab: parsed: +0.25% , gzip: +0.16%

Generated by 🚫 dangerJS against a3234ed

[mnajdova]

This is a bit trickier. The only problem I see is with the styles for the iconContainer and the label, but it is solvable. Let me know if you need some more help.

[siriwatknp]

@oliviertassinari one question about theme styleOverrides for pseudo class. Is this the correct way to do in theme?

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
          '& .Mui-focused': {
            ...styles
          },
          '& .Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

[oliviertassinari]

@siriwatknp Yes

[mnajdova]

@oliviertassinari one question about theme styleOverrides for pseudo class. Is this the correct way to do in theme?

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
          '& .Mui-focused': {
            ...styles
          },
          '& .Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

@siriwatknp just watch out for the spacings, I believe it should be:

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
-         '& .Mui-focused': {
+         '&.Mui-focused': {
            ...styles
          },
-         '& .Mui-expanded': {
+         '&.Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

[mnajdova]

Should we use the global class here? For example:

Suggested change

	'& $label': {
	'& .MuiTreeItem-label': {

[mnajdova]

Or even better:

Suggested change

	'& $label': {
	'& .${treeItemClasses.label}': {

[siriwatknp]

@mnajdova similar to @oliviertassinari suggestion, but there are many places still using $ in this file so I think it might be better to update the whole demo in another PR. is that okay?

[mnajdova]

ok, got it, sorry missed previous question I guess :)

[siriwatknp]

@oliviertassinari one question about theme styleOverrides for pseudo class. Is this the correct way to do in theme?

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
          '& .Mui-focused': {
            ...styles
          },
          '& .Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

@siriwatknp just watch out for the spacings, I believe it should be:

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
-         '& .Mui-focused': {
+         '&.Mui-focused': {
            ...styles
          },
-         '& .Mui-expanded': {
+         '&.Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

Got your point, do I need to change? because right now the pseudo styles is at Content, not Root.

const StyledTreeItemContent = experimentalStyled(...)({
  [`&.${treeItemClasses.disabled}`]: {
    ...
  },
  [`&.${treeItemClasses.focused}`]: {
    ...
  },
  [`&.${treeItemClasses.selected}`]: {
    ...
  },
})

[mnajdova]

Got your point, do I need to change? because right now the pseudo styles is at Content, not Root.

I would expect in that case maybe either :

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        content: { // target content
          '&.Mui-focused': {
            ...styles
          },
           '&.Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

or this

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
          '& .MuiTreeItem-content.Mui-focused': {
            ...styles
          },
           '& .MuiTreeItem-content.Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

[siriwatknp]

Got your point, do I need to change? because right now the pseudo styles is at Content, not Root.

I would expect in that case maybe either :

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        content: { // target content
          '&.Mui-focused': {
            ...styles
          },
           '&.Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

or this

createMuiTheme({
  components: {
    MuiTreeItem: {
      styleOverrides: {
        root: {
          '& .MuiTreeItem-content.Mui-focused': {
            ...styles
          },
           '& .MuiTreeItem-content.Mui-expanded': {
            ...styles
          }
        }
      }
    }
  }
})

Yep, I am good with this.

[mnajdova]

👍