How do we use two themes on the same DOM element when using a ThemeProvider?

Question

<ThemeProvider theme={theme}>

I am using a theme provider, and I want to use two themes on the same DOM element.

style={theme.flexRowLeft}

I want to use two themes at the same time, but right now I can only use one element, and I have no idea how to do what I want to do.

const theme = createMuiTheme({
  flexRow: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  justifyRight: {
    justifyContent: "right",
  },
});

How do I combine flexRow and justifyRight?

I am using Material-UI's themeprovider.

Did you try [ClassNames](https://www.npmjs.com/package/classnames) library to combine Classes? — SelvaS, Jun 07 '20 at 21:19

score 2 · Accepted Answer · answered Jun 07 '20 at 21:30

2

As suggested here

assuming you got theme through the useTheme hook inside your functional component:

const theme = useTheme()

you can try string interpolation:

<div className={`${theme.flexRow} ${theme.justifyRight}`}/>

so in total, for example:

const someComponent = props => {
   const theme = useTheme();
   return(<div className={`${theme.flexRow} ${theme.justifyRight}`}/>);
}

note that you should use className property, and not the style!

answered Jun 07 '20 at 21:30

Tomer Landsman

62
11

how do you use themes and makeStyles classes at the same time? – Sayaman Jun 07 '20 at 22:16
what we did was passing the theme from the useTheme hook to the makeStyles function, and that's how the makeStyles "knows" the current theme you are working on rather that MUI default theme – Tomer Landsman Jun 08 '20 at 05:59

score 1 · Answer 2 · answered Jun 07 '20 at 21:23

In one file you create files with themes like themes.js where you put:

export const theme = createMuiTheme({
  flexRow: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  justifyRight: {
    justifyContent: "right",
  },
});

And when you want to use it in functional component you write something like:

import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";

const myStyles = makeStyles(theme => ({
    AA: {
        display: theme.flexRow.display,
        flexDirection: theme.flexRow.flexDirection,
        alignItems: theme.flexRow.alignItems
    },
    BB: {
        justifyContent: theme.justifyRight.justifyContent
    }
}), {name: "StyleNameVisibleInCss"});

function myFunctionalComponent() {
    const classes = myStyles();
    return (
        <div className={clsx(classes.AA, classes.BB)}> Some text </div>
    )
}

wait, what if you want to use all of flexRow theme without having to assign every single attribute? — Sayaman, Jun 07 '20 at 22:18

How do we use two themes on the same DOM element when using a ThemeProvider?

2 Answers2