javascript - Programatically addremove class generated by material ui - Stack Overflow

admin管理员组

文章数量:1425998

How can I programmatically add/ remove the material-UI classes that I defined in makeStyles() Here's my code:

import React from 'react';
import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../ponents/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    input: {
        display: 'none'
    },
    label: {
        display: 'inline-flex',
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2),
        justifyCOntent: 'space-between',
        padding: theme.spacing(1, 1.5)
    },
    iconName: {
        marginLeft: theme.spacing(1)
    },
    iconsFormWrapper: {
        marginTop: theme.spacing(2)
    },
    selectedService: {
        backgroundColor: theme.palette.primary.dark,
        borderRadius: theme.spacing(1),
        color: '#ffffff',
        '& svg, img': {
            fill: '#ffffff!important',
            filter: 'brightness(0) invert(1)'
        }
    }

}));

const selectServiceHandle = (e) => {
    const optionName = document.getElementsByName("signup-service");
    optionName.classList.remove("selectedService")
    document.querySelectorAll(`input[value=${e.target.value}]`).classList.add("selectedService")
}

const SignupRadioIcons = () => {
    const classes = useStyles();
        return (
            <div className={classes.iconsFormWrapper}>
                <form>
                    <label className={`${classes.label} ${classes.selectedService}`}>
                         <DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
                          <input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="dropbox" className={classes.input} /> 
                    </label>
                    <label className={classes.label}>
                         <GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
                          <input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="drive" className={classes.input} /> 
                    </label>
                    <label className={classes.label}>
                         <BoxIcon/> <span className={classes.iconName}>Box</span>
                          <input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="box" className={classes.input} /> 
                    </label>
                </form>
            </div>
        )
}


export default SignupRadioIcons;

In my code, I defined a class called selectedService in my makeStyles() But I want to add/remove this class on every change event, Whenever a user click any input I want to remove this class from all other inputs and add it to the one where the user clicked. But this code is not working because the actual classes that is generated by material UI look like makeStyles-selectedService-224 and the postfix number keeps on changing on every refresh.

How can I programmatically add/ remove the material-UI classes that I defined in makeStyles() Here's my code:

import React from 'react';
import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../ponents/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    input: {
        display: 'none'
    },
    label: {
        display: 'inline-flex',
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2),
        justifyCOntent: 'space-between',
        padding: theme.spacing(1, 1.5)
    },
    iconName: {
        marginLeft: theme.spacing(1)
    },
    iconsFormWrapper: {
        marginTop: theme.spacing(2)
    },
    selectedService: {
        backgroundColor: theme.palette.primary.dark,
        borderRadius: theme.spacing(1),
        color: '#ffffff',
        '& svg, img': {
            fill: '#ffffff!important',
            filter: 'brightness(0) invert(1)'
        }
    }

}));

const selectServiceHandle = (e) => {
    const optionName = document.getElementsByName("signup-service");
    optionName.classList.remove("selectedService")
    document.querySelectorAll(`input[value=${e.target.value}]`).classList.add("selectedService")
}

const SignupRadioIcons = () => {
    const classes = useStyles();
        return (
            <div className={classes.iconsFormWrapper}>
                <form>
                    <label className={`${classes.label} ${classes.selectedService}`}>
                         <DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
                          <input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="dropbox" className={classes.input} /> 
                    </label>
                    <label className={classes.label}>
                         <GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
                          <input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="drive" className={classes.input} /> 
                    </label>
                    <label className={classes.label}>
                         <BoxIcon/> <span className={classes.iconName}>Box</span>
                          <input type="radio" onChange={(e)=>selectServiceHandle(e)} name="signup-service" value="box" className={classes.input} /> 
                    </label>
                </form>
            </div>
        )
}


export default SignupRadioIcons;

In my code, I defined a class called selectedService in my makeStyles() But I want to add/remove this class on every change event, Whenever a user click any input I want to remove this class from all other inputs and add it to the one where the user clicked. But this code is not working because the actual classes that is generated by material UI look like makeStyles-selectedService-224 and the postfix number keeps on changing on every refresh.

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Aug 11, 2019 at 20:24 Noob 2,81744 gold badges2323 silver badges4343 bronze badges asked Aug 11, 2019 at 20:15 WaeezWaeez 33944 gold badges1313 silver badges2929 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can set state to the currently selected radio's value, then use a conditional statement to check if the selected value equals the currently selected state in order to apply css.

I would remend converting your radio's into JSON objects, then looping through them - this makes things a lot easier.

I have provided an example of how to handle this without using a loop, as well as with using a loop in the SandBox below.

Example Code Using JSON & Looping:

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Dropbox from "./Dropbox.js";
import Box from "./Box.js";
import Drive from "./Drive.js";

const base = {
  fontSize: "20px"
};

const useStyles = makeStyles(theme => ({
  base: {
    ...base
  },
  selected: {
    ...base,
    fontSize: "40px",
    backgroundColor: "yellow",
    textDecorationLine: "underline"
  }
}));

const radioObjects = [
  {
    label: Dropbox,
    value: "dropbox"
  },
  {
    label: Drive,
    value: "drive"
  },
  {
    label: Box,
    value: "box"
  }
];

export default function WithLoop() {
  const classes = useStyles();
  const [currentlyChecked, setCurrentlyChecked] = useState();

  function handleChange(event) {
    setCurrentlyChecked(event.target.value);
    // do work
  }

  return (
    <div>
      <form>
        {radioObjects.map(RadioItem => {
          return (
            <div key={RadioItem.value}>
              <label
                className={
                  currentlyChecked === RadioItem.value
                    ? classes.selected
                    : classes.base
                }
              >
                <RadioItem.label />
                <input
                  value={RadioItem.value}
                  onChange={handleChange}
                  type="radio"
                  name="signup-service"
                />
              </label>
            </div>
          );
        })}
      </form>
    </div>
  );
}

Given you are using React, I'd suggest you use local state to determine when to apply the class

import React, { useState } from 'react';
const storageProviders = {
  Dropbox: 1,
  GoogleDrive: 2,
  Box: 3
};
...
const SignupRadioIcons = () => {
  const classes = useStyles();
  const [focusedInput, setFocusedInput] = useState(storageProviders.Dropbox);
  return (
    <div className={classes.iconsFormWrapper}>
      <form>
        <label className={`${classes.label} ${focusedInput === storageProviders.Dropbox ? classes.selectedService : ''}`}>
          <DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
            <input type="radio" onChange={() => setFocusedInput(storageProviders.Dropbox)} name="signup-service" value="dropbox" className={classes.input} /> 
        </label>
        <label className={`${classes.label} ${focusedInput === storageProviders.GoogleDrive ? classes.selectedService : ''}`}>
          <GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
          <input type="radio" onChange={() => setFocusedInput(storageProviders.GoogleDrive)} name="signup-service" value="drive" className={classes.input} /> 
        </label>
        <label className={`${classes.label} ${focusedInput === storageProviders.Box ? classes.selectedService : ''}`}>
          <BoxIcon/> <span className={classes.iconName}>Box</span>
          <input type="radio" onChange={() => setFocusedInput(storageProviders.Box)} name="signup-service" value="box" className={classes.input} /> 
        </label>
      </form>
    </div>
  )
}

There's a mon pattern there that you could probably move into a reusable ponent but you get the jist of it.

This code will work if react version is more than 16

import React, { useState } from 'react';

const SignupRadioIcons = () => {
    const classes = useStyles();
    const [selectedService, setSelectedService]= useState('dropbox');

        return (
            <div className={classes.iconsFormWrapper}>
                <form>
                    <label className={`${classes.label} ${selectedService === 'dropbox' ? classes.selectedService : undefined}`}>
                         <DropboxIcon/> <span className={classes.iconName}>Dropbox</span>
                          <input type="radio" onChange={(e)=> setSelectedService('dropbox')} name="signup-service" value="dropbox" className={classes.input} /> 
                    </label>
                    <label  className={`${classes.label} ${selectedService === 'googleDrive' ? classes.selectedService : undefined}`}>
                         <GoogleDriveIcon/> <span className={classes.iconName}>Google Drive</span>
                          <input type="radio" onChange={(e)=> setSelectedService('googleDrive')} name="signup-service" value="drive" className={classes.input} /> 
                    </label>
                    <label className={`${classes.label} ${selectedService === 'box' ? classes.selectedService : undefined}`}>
                         <BoxIcon/> <span className={classes.iconName}>Box</span>
                          <input type="radio" onChange={(e)=> setSelectedService('box')} name="signup-service" value="box" className={classes.input} /> 
                    </label>
                </form>
            </div>
        )
}

You can use ClassNameGenerator

To rename ponent class name:

import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure((ponentName) => ponentName.replace('Mui', ''));

For example:

ClassNameGenerator.configure((MuiSelect) => MuiSelect.replace('Mui', ''));

Where "the" Mui is the prefix of your ponent (all the Material ponents use the same prefix).

Have a look at the documentation

本文标签： javascriptProgramatically addremove class generated by material uiStack Overflow