React component Material UI withStyles: Variables in styles?

Question

Is there a way to use variables in my React components using Material UI and withStyles? How can replace the repeated '20px' in the styles const below with a variable? Is this possible?

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Topnav from '../component/Topnav';
import Footer from '../component/Footer';

const styles = {
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    margin: {
        marginLeft: '20px',
        marginRight: '20px',
        marginTop: '20px',
    }
};

class MainLayoutComp extends Component {
    render = props => {
        const { children, classes } = this.props;

        return (
            <>
                <Topnav />
                <div className={classes.margin}>
                    {children}
                    <Footer />
                </div>
            </>
        );
    }
}

const MainLayout = withStyles(styles)(MainLayoutComp);
export default MainLayout;

Ryan Cogswell · Answer 1 · 2020-01-13T18:13:50.017

0

The answer below is specific to this question of replacing repeated values in the styles, but may not be what most people are looking for based on the title of the question. If you are wanting dynamic styles based on props, see the following questions:

It's just JavaScript, so you can do the following:

const myMargin = '20px';
const styles = {
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    margin: {
        marginLeft: myMargin,
        marginRight: myMargin,
        marginTop: myMargin,
    }
};

Also, you can easily leverage your theme by using a function for the styles. withStyles will pass the theme as an argument:

const styles = (theme) => ({
    root: {
        flexGrow: 1,
    },
    grow: {
        flexGrow: 1,
    },
    margin: {
        marginLeft: theme.spacing.unit * 3,
        marginRight: theme.spacing.unit * 3,
        marginTop: theme.spacing.unit * 3,
    }
});

Here's a working example showing both:

edited Jan 13 '20 at 18:13

answered Jan 20 '19 at 15:32

Ryan Cogswell

75,046
9
218
198

This is a poor example. The issue is that `export default withStyles(styles)(ExportVar)` first wraps styles around ExportVar, so styles are run before ExportVar. This means, yes, of course, you can put a variable in styles, but you cannot modify styles *from* ExportVar. This is the issue. – Peter Weyand Feb 22 '19 at 17:07
The question was asking how to "replace the **repeated** '20px'" with a variable. It was not asking (as I understood it) how to control the value from `MainLayoutComp`. Controlling the value from `MainLayoutComp` would be possible now using the hook syntax: https://twitter.com/olivtassinari/status/1097196508007596032 – Ryan Cogswell Feb 22 '19 at 17:13
Ok - so this doesn't address the issue either. The hook tweet you have linked allows you to switch between class items, but not dynamically change values inside the withStyle class. So, for example, I can toggle open or closing the drawer, but cannot style the table color to an input as specified by the user. – Peter Weyand Feb 22 '19 at 17:53
Perhaps my question is different - apologies if that is the case. Please see here: https://stackoverflow.com/questions/54832736/send-variable-to-withstyles-in-material-ui – Peter Weyand Feb 22 '19 at 18:08
@PeterWeyand Yes, I think it is a different question and I do think the hook syntax allows what you want. I'll show how on your question. – Ryan Cogswell Feb 22 '19 at 18:16

React component Material UI withStyles: Variables in styles?

1 Answers1