Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow to pass mixins as a function to createMuiTheme() #18389

Closed
wants to merge 1 commit into from

Conversation

koistya
Copy link
Contributor

@koistya koistya commented Nov 15, 2019

Usage Example

createMuiTheme({
  mixins: (breakpoints, spacing) => ({
    element: {
      padding: spacing(1),
      [breakpoints.up('sm')]: {
        padding: spacing(2)
      }
    }
  })
})

@mui-pr-bot
Copy link

mui-pr-bot commented Nov 15, 2019

Details of bundle changes.

Comparing: 64ae0c6...c4e6b7e

bundle Size Change Size Gzip Change Gzip
StepButton ▲ +28 B (+0.03% ) 80.8 kB ▲ +15 B (+0.06% ) 25.4 kB
Checkbox ▲ +28 B (+0.03% ) 80.3 kB ▲ +13 B (+0.05% ) 25.2 kB
ListSubheader ▲ +28 B (+0.05% ) 61.3 kB ▲ +13 B (+0.07% ) 19.2 kB
Radio ▲ +28 B (+0.03% ) 81.2 kB ▲ +13 B (+0.05% ) 25.5 kB
TableSortLabel ▲ +28 B (+0.04% ) 75.9 kB ▲ +13 B (+0.05% ) 24 kB
Autocomplete ▲ +28 B (+0.02% ) 126 kB ▲ +12 B (+0.03% ) 39.9 kB
ButtonGroup ▲ +28 B (+0.03% ) 80.5 kB ▲ +12 B (+0.05% ) 24.7 kB
MobileStepper ▲ +28 B (+0.04% ) 66.3 kB ▲ +12 B (+0.06% ) 20.7 kB
Popover ▲ +28 B (+0.03% ) 81.1 kB ▲ +12 B (+0.05% ) 25 kB
BottomNavigationAction ▲ +28 B (+0.04% ) 74 kB ▲ +11 B (+0.05% ) 23.4 kB
Drawer ▲ +28 B (+0.03% ) 82.8 kB ▲ +11 B (+0.04% ) 25.6 kB
FormHelperText ▲ +28 B (+0.05% ) 61.8 kB ▲ +11 B (+0.06% ) 19.3 kB
InputLabel ▲ +28 B (+0.04% ) 63.9 kB ▲ +11 B (+0.06% ) 19.9 kB
Menu ▲ +28 B (+0.03% ) 86.7 kB ▲ +11 B (+0.04% ) 27.2 kB
StepLabel ▲ +28 B (+0.04% ) 67.2 kB ▲ +11 B (+0.05% ) 21.1 kB
ToggleButton ▲ +28 B (+0.04% ) 74.6 kB ▲ +11 B (+0.05% ) 23.6 kB
Avatar ▲ +28 B (+0.05% ) 61.3 kB ▲ +10 B (+0.05% ) 19.3 kB
Box ▲ +28 B (+0.04% ) 69.3 kB ▲ +10 B (+0.05% ) 21 kB
Breadcrumbs ▲ +28 B (+0.04% ) 66.5 kB ▲ +10 B (+0.05% ) 20.9 kB
ButtonBase ▲ +28 B (+0.04% ) 72.5 kB ▲ +10 B (+0.04% ) 22.7 kB
CardActionArea ▲ +28 B (+0.04% ) 73.6 kB ▲ +10 B (+0.04% ) 23.2 kB
ExpansionPanel ▲ +28 B (+0.04% ) 69.8 kB ▲ +10 B (+0.05% ) 21.8 kB
FilledInput ▲ +28 B (+0.04% ) 72.1 kB ▲ +10 B (+0.04% ) 22.3 kB
GridListTile ▲ +28 B (+0.04% ) 62.3 kB ▲ +10 B (+0.05% ) 19.5 kB
Input ▲ +28 B (+0.04% ) 71.1 kB ▲ +10 B (+0.05% ) 22.1 kB
InputAdornment ▲ +28 B (+0.04% ) 63.6 kB ▲ +10 B (+0.05% ) 20 kB
LinearProgress ▲ +28 B (+0.04% ) 63.9 kB ▲ +10 B (+0.05% ) 19.9 kB
ListItem ▲ +28 B (+0.04% ) 75.6 kB ▲ +10 B (+0.04% ) 23.6 kB
MenuItem ▲ +28 B (+0.04% ) 76.7 kB ▲ +10 B (+0.04% ) 23.9 kB
OutlinedInput ▲ +28 B (+0.04% ) 72.6 kB ▲ +10 B (+0.04% ) 22.5 kB
Select ▲ +28 B (+0.02% ) 113 kB ▲ +10 B (+0.03% ) 33.4 kB
SwipeableDrawer ▲ +28 B (+0.03% ) 90.2 kB ▲ +10 B (+0.04% ) 28 kB
Switch ▲ +28 B (+0.04% ) 79.6 kB ▲ +10 B (+0.04% ) 24.8 kB
Tab ▲ +28 B (+0.04% ) 74.8 kB ▲ +10 B (+0.04% ) 23.7 kB
TextField ▲ +28 B (+0.02% ) 121 kB ▲ +10 B (+0.03% ) 35.5 kB
Badge ▲ +28 B (+0.04% ) 63.9 kB ▲ +9 B (+0.05% ) 19.8 kB
BottomNavigation ▲ +28 B (+0.05% ) 61 kB ▲ +9 B (+0.05% ) 19.1 kB
Collapse ▲ +28 B (+0.04% ) 66.4 kB ▲ +9 B (+0.04% ) 20.5 kB
DialogActions ▲ +28 B (+0.05% ) 60.7 kB ▲ +9 B (+0.05% ) 19 kB
DialogContent ▲ +28 B (+0.05% ) 60.8 kB ▲ +9 B (+0.05% ) 19 kB
ExpansionPanelDetails ▲ +28 B (+0.05% ) 60.5 kB ▲ +9 B (+0.05% ) 18.9 kB
FormControlLabel ▲ +28 B (+0.04% ) 64.1 kB ▲ +9 B (+0.04% ) 20.1 kB
GridList ▲ +28 B (+0.05% ) 61 kB ▲ +9 B (+0.05% ) 19.1 kB
InputBase ▲ +28 B (+0.04% ) 69.2 kB ▲ +9 B (+0.04% ) 21.6 kB
Link ▲ +28 B (+0.04% ) 65.2 kB ▲ +9 B (+0.04% ) 20.6 kB
ListItemAvatar ▲ +28 B (+0.05% ) 60.7 kB ▲ +9 B (+0.05% ) 19 kB
NativeSelect ▲ +28 B (+0.04% ) 75.3 kB ▲ +9 B (+0.04% ) 23.7 kB
Slide ▲ +28 B (+0.12% ) 24.2 kB ▲ +9 B (+0.11% ) 8.25 kB
SnackbarContent ▲ +28 B (+0.04% ) 64.2 kB ▲ +9 B (+0.04% ) 20.2 kB
SpeedDialIcon ▲ +28 B (+0.04% ) 63.1 kB ▲ +9 B (+0.05% ) 19.8 kB
StepConnector ▲ +28 B (+0.05% ) 61.3 kB ▲ +9 B (+0.05% ) 19.3 kB
StepIcon ▲ +28 B (+0.04% ) 63.2 kB ▲ +9 B (+0.05% ) 19.7 kB
TableBody ▲ +28 B (+0.05% ) 60.7 kB ▲ +9 B (+0.05% ) 19 kB
TableCell ▲ +28 B (+0.04% ) 62.6 kB ▲ +9 B (+0.05% ) 19.6 kB
TableFooter ▲ +28 B (+0.05% ) 60.7 kB ▲ +9 B (+0.05% ) 19 kB
TableHead ▲ +28 B (+0.05% ) 60.7 kB ▲ +9 B (+0.05% ) 19 kB
TablePagination ▲ +28 B (+0.02% ) 139 kB ▲ +9 B (+0.02% ) 40.6 kB
TableRow ▲ +28 B (+0.05% ) 61.1 kB ▲ +9 B (+0.05% ) 19.1 kB
TreeItem ▲ +28 B (+0.04% ) 72.1 kB ▲ +9 B (+0.04% ) 22.7 kB
TreeView ▲ +28 B (+0.04% ) 64.9 kB ▲ +9 B (+0.04% ) 20.3 kB
@material-ui/core ▲ +28 B (+0.01% ) 351 kB ▲ +8 B (+0.01% ) 95.9 kB
@material-ui/lab ▲ +28 B (+0.02% ) 171 kB ▲ +8 B (+0.02% ) 51.7 kB
AppBar ▲ +28 B (+0.04% ) 62.3 kB ▲ +8 B (+0.04% ) 19.5 kB
Backdrop ▲ +28 B (+0.04% ) 66.3 kB ▲ +8 B (+0.04% ) 20.4 kB
Card ▲ +28 B (+0.05% ) 61.3 kB ▲ +8 B (+0.04% ) 19.2 kB
CardActions ▲ +28 B (+0.05% ) 60.6 kB ▲ +8 B (+0.04% ) 19 kB
CardContent ▲ +28 B (+0.05% ) 60.5 kB ▲ +8 B (+0.04% ) 18.9 kB
CardHeader ▲ +28 B (+0.04% ) 63.6 kB ▲ +8 B (+0.04% ) 20 kB
CardMedia ▲ +28 B (+0.05% ) 60.9 kB ▲ +8 B (+0.04% ) 19.1 kB
CircularProgress ▲ +28 B (+0.04% ) 62.7 kB ▲ +8 B (+0.04% ) 19.7 kB
Container ▲ +28 B (+0.05% ) 61.7 kB ▲ +8 B (+0.04% ) 19.3 kB
CssBaseline ▲ +28 B (+0.05% ) 56.1 kB ▲ +8 B (+0.05% ) 17.6 kB
DialogContentText ▲ +28 B (+0.04% ) 62.6 kB ▲ +8 B (+0.04% ) 19.7 kB
DialogTitle ▲ +28 B (+0.04% ) 62.8 kB ▲ +8 B (+0.04% ) 19.7 kB
Divider ▲ +28 B (+0.05% ) 61.2 kB ▲ +8 B (+0.04% ) 19.2 kB
docs.main ▲ +28 B (0.00% ) 606 kB ▲ +8 B (0.00% ) 193 kB
ExpansionPanelActions ▲ +28 B (+0.05% ) 60.7 kB ▲ +8 B (+0.04% ) 19 kB
Fab ▲ +28 B (+0.04% ) 75.3 kB ▲ +8 B (+0.03% ) 23.4 kB
FormControl ▲ +28 B (+0.04% ) 62.9 kB ▲ +8 B (+0.04% ) 19.5 kB
FormGroup ▲ +28 B (+0.05% ) 60.6 kB ▲ +8 B (+0.04% ) 18.9 kB
FormLabel ▲ +28 B (+0.05% ) 62.1 kB ▲ +8 B (+0.04% ) 19.2 kB
Grid ▲ +28 B (+0.04% ) 63.7 kB ▲ +8 B (+0.04% ) 19.9 kB
Hidden ▲ +28 B (+0.04% ) 64.5 kB ▲ +8 B (+0.04% ) 20.2 kB
Icon ▲ +28 B (+0.05% ) 61.4 kB ▲ +8 B (+0.04% ) 19.2 kB
List ▲ +28 B (+0.05% ) 60.9 kB ▲ +8 B (+0.04% ) 18.9 kB
ListItemIcon ▲ +28 B (+0.05% ) 60.7 kB ▲ +8 B (+0.04% ) 19 kB
ListItemSecondaryAction ▲ +28 B (+0.05% ) 60.6 kB ▲ +8 B (+0.04% ) 19 kB
ListItemText ▲ +28 B (+0.04% ) 63.5 kB ▲ +8 B (+0.04% ) 20 kB
Paper ▲ +28 B (+0.05% ) 60.8 kB ▲ +8 B (+0.04% ) 18.9 kB
Rating ▲ +28 B (+0.04% ) 68.6 kB ▲ +8 B (+0.04% ) 21.9 kB
Skeleton ▲ +28 B (+0.05% ) 61 kB ▲ +8 B (+0.04% ) 19.2 kB
Slider ▲ +28 B (+0.04% ) 74.1 kB ▲ +8 B (+0.03% ) 23.4 kB
Snackbar ▲ +28 B (+0.04% ) 75.7 kB ▲ +8 B (+0.03% ) 23.6 kB
SpeedDial ▲ +28 B (+0.03% ) 84.6 kB ▲ +8 B (+0.03% ) 26.6 kB
SpeedDialAction ▲ +28 B (+0.02% ) 115 kB ▲ +8 B (+0.02% ) 36.4 kB
Step ▲ +28 B (+0.05% ) 61.2 kB ▲ +8 B (+0.04% ) 19.2 kB
StepContent ▲ +28 B (+0.04% ) 67.5 kB ▲ +8 B (+0.04% ) 21.1 kB
Stepper ▲ +28 B (+0.04% ) 63.3 kB ▲ +8 B (+0.04% ) 19.9 kB
styles/createMuiTheme ▲ +28 B (+0.18% ) 15.4 kB ▲ +8 B (+0.15% ) 5.41 kB
SvgIcon ▲ +28 B (+0.05% ) 61.6 kB ▲ +8 B (+0.04% ) 19.2 kB
Table ▲ +28 B (+0.05% ) 61.1 kB ▲ +8 B (+0.04% ) 19.2 kB
ToggleButtonGroup ▲ +28 B (+0.05% ) 61.8 kB ▲ +8 B (+0.04% ) 19.4 kB
Toolbar ▲ +28 B (+0.05% ) 60.9 kB ▲ +8 B (+0.04% ) 19.1 kB
Tooltip ▲ +28 B (+0.03% ) 99 kB ▲ +8 B (+0.03% ) 31.3 kB
Typography ▲ +28 B (+0.05% ) 62.2 kB ▲ +8 B (+0.04% ) 19.4 kB
@material-ui/core[umd] ▲ +28 B (+0.01% ) 310 kB ▲ +7 B (+0.01% ) 89.2 kB
Button ▲ +28 B (+0.04% ) 78 kB ▲ +7 B (+0.03% ) 23.8 kB
Chip ▲ +28 B (+0.03% ) 81.1 kB ▲ +7 B (+0.03% ) 24.7 kB
Dialog ▲ +28 B (+0.03% ) 81.1 kB ▲ +7 B (+0.03% ) 25.2 kB
ExpansionPanelSummary ▲ +28 B (+0.04% ) 76.6 kB ▲ +7 B (+0.03% ) 24.1 kB
Fade ▲ +28 B (+0.13% ) 22.2 kB ▲ +7 B (+0.09% ) 7.64 kB
GridListTileBar ▲ +28 B (+0.05% ) 61.8 kB ▲ +7 B (+0.04% ) 19.3 kB
Grow ▲ +28 B (+0.12% ) 22.8 kB ▲ +7 B (+0.09% ) 7.76 kB
IconButton ▲ +28 B (+0.04% ) 74.6 kB ▲ +7 B (+0.03% ) 23.2 kB
MenuList ▲ +28 B (+0.04% ) 64.6 kB ▲ +7 B (+0.03% ) 20.1 kB
RadioGroup ▲ +28 B (+0.05% ) 61.8 kB ▲ +7 B (+0.04% ) 19.3 kB
Zoom ▲ +28 B (+0.13% ) 22.2 kB ▲ +6 B (+0.08% ) 7.64 kB
Tabs ▲ +28 B (+0.03% ) 83.9 kB ▲ +4 B (+0.01% ) 26.7 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
colorManipulator -- 3.83 kB -- 1.52 kB
docs.landing -- 55.8 kB -- 14.3 kB
Modal -- 14.2 kB -- 4.96 kB
NoSsr -- 2.19 kB -- 1.04 kB
Popper -- 28.5 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.3 kB
RootRef -- 4.43 kB -- 1.67 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
useAutocomplete -- 12.1 kB -- 4.47 kB
useMediaQuery -- 2.49 kB -- 1.05 kB

Generated by 🚫 dangerJS against c4e6b7e

@mbrookes mbrookes added the core Infrastructure work going on behind the scenes label Nov 15, 2019
@mbrookes
Copy link
Member

@koistya Could you expand on the use-case?

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 15, 2019

I don't think that we should move forward, as is. in #18219, we introduce the support of multi arguments for the createMuiTheme(), we could consider adding the support for function arguments too:

const theme = createMuiTheme({}, theme => ({ mixins: { foo: 'bar' } }));

The alternative is to apply the same pattern as responsiveFontSizes().

@koistya
Copy link
Contributor Author

koistya commented Nov 16, 2019

const theme = createMuiTheme({}, theme => ({ mixins: { foo: 'bar' } }));

Yeah, that would even be better. Good to know.

@koistya koistya closed this Nov 16, 2019
@oliviertassinari
Copy link
Member

@koistya It's not supported, it's an idea.

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 16, 2019

What's wrong with the two stages approaches?

const theme = createMuiTheme();

theme.mixins.element = {
  padding: theme.spacing(1),
  [theme.breakpoints.up('sm')]: {
    padding: theme.spacing(2),
  },
};

@koistya
Copy link
Contributor Author

koistya commented Nov 16, 2019

@oliviertassinari two stage approach does work for me. Will switch to createMuiTheme({}, theme => ...) syntax later when it becomes available.

@oliviertassinari
Copy link
Member

@mbrookes Any preference for the next step?

@mbrookes
Copy link
Member

Two-stage seems good enough to me, now that I've grasped the use-case, but your call.

@oliviertassinari
Copy link
Member

Ok, it can wait then

@koistya koistya deleted the feat/styles/create-mixins branch March 18, 2020 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants