How can I pass a variable to withStyles in Material UI?

Question

How can I pass a variable to withStyles in Material UI?

Here is the code I am currently working with:

class StyledInput extends React.Component{


  styles = (color, theme) => ({
    underline: {
      borderBottom: `2px solid ${color}`,
      '&:after': {
        borderBottom: `2px solid ${color}`,
      }
    }
  })
  
  div = props => (
    <TextField
    placeholder="temp input"
    InputProps={{
      classes:{
        root: props.classes.underline
      },
      style:{
        height: '1.5rem',
        fontSize:'1rem',
        marginTop: '-1rem',
      }
    }}
    >
      <div>
        {props.children}
      </div>
    </TextField>
  )
  
  Styled = withStyles(this.styles('white'))(this.div)

  render(){
    return(
      <div>
        <this.Styled>{this.props.children}</this.Styled>
      </div>
    );
  }
}

export default StyledInput;

The current functionality successfully changes the color of the bottom bar in a material UI text field to white when clicked by the user.

However, my goal is to make it more dynamic, like this:

<this.Styled color={someDefinedColor}>{this.props.children}</this.Styled>

where Styled would be changed to:

Styled = (color) => withStyles(this.styles(color))(this.div)

I have attempted to implement this, but haven't been successful so far. Material-ui can be challenging when it comes to dynamically changing colors. Does anyone have any insight or suggestions on how to achieve this?

Thank you!

css reactjs material-ui wrapper higher-order-components

Answer 1

Answer №1

Check out this demo showcasing the usage of the new hook syntax:

index.js

import React from "react";
import ReactDOM from "react-dom";
import StyledComponent from "./StyledComponent";

const CustomComponent = ({ children, className }) => {
  return (
    <p className={className}>
      Instead of automatically using a div, here we pass in the component to use.
      <br />
      {children}
    </p>
  );
};

function App() {
  return (
    <div className="App">
      <StyledComponent color="green">
        Here's my content with green underline
      </StyledComponent>
      <StyledComponent
        component={CustomComponent}
        color="blue"
        hoverColor="orange"
      >
        Here's my content with blue underline that changes to orange on hover.
      </StyledComponent>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

StyledComponent.js

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  root: {
    borderBottom: ({ color }) => `2px solid ${color}`,
    "&:hover": {
      borderBottom: ({ color, hoverColor }) => {
        const borderColor = hoverColor ? hoverColor : color;
        return `2px solid ${borderColor}`;
      }
    }
  }
});

const StyledComponent = ({
  component: ComponentProp = "div",
  children,
  color,
  hoverColor
}) => {
  const classes = useStyles({ color, hoverColor });
  return <ComponentProp className={classes.root}>{children}</ComponentProp>;
};

export default StyledComponent;

https://codesandbox.io/s/mq3n246008?fontsize=14

If needed, you can extract the useStyles method into its own file and use it as a custom hook to provide the generated classes (including variable support) to multiple components beyond just StyledComponent.

Answer 2

Check out this demo showcasing the usage of the new hook syntax:

index.js

import React from "react";
import ReactDOM from "react-dom";
import StyledComponent from "./StyledComponent";

const CustomComponent = ({ children, className }) => {
  return (
    <p className={className}>
      Instead of automatically using a div, here we pass in the component to use.
      <br />
      {children}
    </p>
  );
};

function App() {
  return (
    <div className="App">
      <StyledComponent color="green">
        Here's my content with green underline
      </StyledComponent>
      <StyledComponent
        component={CustomComponent}
        color="blue"
        hoverColor="orange"
      >
        Here's my content with blue underline that changes to orange on hover.
      </StyledComponent>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

StyledComponent.js

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  root: {
    borderBottom: ({ color }) => `2px solid ${color}`,
    "&:hover": {
      borderBottom: ({ color, hoverColor }) => {
        const borderColor = hoverColor ? hoverColor : color;
        return `2px solid ${borderColor}`;
      }
    }
  }
});

const StyledComponent = ({
  component: ComponentProp = "div",
  children,
  color,
  hoverColor
}) => {
  const classes = useStyles({ color, hoverColor });
  return <ComponentProp className={classes.root}>{children}</ComponentProp>;
};

export default StyledComponent;

https://codesandbox.io/s/mq3n246008?fontsize=14

If needed, you can extract the useStyles method into its own file and use it as a custom hook to provide the generated classes (including variable support) to multiple components beyond just StyledComponent.

Answer 3

Answer №2

Discover a new way to utilize props or a combination of props and themes with makeStyles(), similar to styled-components

element.js

import { tableCellStyles } from './element.styled.js';

const DataGridRow = (props) => {
    const { noPaddingTopBottom } = tableCellStyles(props);
    return(
        <StyledTableRow>
            {data.map( (row,i) => (
                <StyledTableCell className={noPaddingTopBottom}>
                    {row.data}
                </StyledTableCell>
            )}
        </StyledTableRow>
    )
};

Assuming that the props object passed from DataGridRow Component to tableCellStyles contains { color: 'grey', thinRow: true }

element.styled.js

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

export const tableCellStyling = makeStyles(theme => ({
    noPaddingTopBottom: {
        borderBottom: ({ color }) => color ? `2px solid ${color}` : '2px solid red',
        paddingBottom: props => props.hasActions && 0,
        paddingTop: props => props.hasActions && 0,
        backgroundColor: theme.palette.common.white,
    },
}));

Answer 4

Discover a new way to utilize props or a combination of props and themes with makeStyles(), similar to styled-components

element.js

import { tableCellStyles } from './element.styled.js';

const DataGridRow = (props) => {
    const { noPaddingTopBottom } = tableCellStyles(props);
    return(
        <StyledTableRow>
            {data.map( (row,i) => (
                <StyledTableCell className={noPaddingTopBottom}>
                    {row.data}
                </StyledTableCell>
            )}
        </StyledTableRow>
    )
};

Assuming that the props object passed from DataGridRow Component to tableCellStyles contains { color: 'grey', thinRow: true }

element.styled.js

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

export const tableCellStyling = makeStyles(theme => ({
    noPaddingTopBottom: {
        borderBottom: ({ color }) => color ? `2px solid ${color}` : '2px solid red',
        paddingBottom: props => props.hasActions && 0,
        paddingTop: props => props.hasActions && 0,
        backgroundColor: theme.palette.common.white,
    },
}));

How can I pass a variable to withStyles in Material UI?

Answer №1

Answer №2

Similar questions

Using CSS to enhance typography in Material UI

Incorporating an if condition within the componentDidUpdate method in React resulted in an unforeseen infinite loop

Tailwind's unique approach to custom @font-faces allows for

When AutoSizer is applied, make sure to automatically scroll the FixedSizeList to the final element

The parameter 'CallHistoryMethodAction<[string, unknown?]>' does not match the 'UserActionType' parameter

Styling CSS code to centrally align a background image in the footer of a

Is there a way to automatically change the full screen background on refresh?

Is there a method for configuring NextAuth to utilize the /src/app directory instead?

The Material UI month picker interface is not displaying correctly

Optimal methods for sending Redux state to components

Changes in the Redux state are not being displayed or updated in the component

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

The element's width set to 100% is not functioning properly when used within a container

Tips for receiving feedback when uploading multiple images

How do I make the YouTube Grid Gallery player show up in a pop-up window?

Instructions for compiling node-sass within the present directory for specific files

Attempting to emulate the grid showcase using flexbox styling

Incorporate the React modal component into your project

The ng-style directive is not functioning properly

Is dynamic rendering advisable over static rendering with fetch headers in Next.js v13?