Javascript 覆盖单个css样式/标记

我有一个大型的React应用程序，它现在使用的是MaterialUI4.3.0

我试图删除

标签+.MuiInput formControl的
页边距顶部
样式。（它是一个
select
mui组件）
我在App.js中使用了“overrides”标记，正如我以前所做的那样

const theme = createMuiTheme({
overrides: {
 MuiInput: {
  formControl: {
   "label + &": {
    marginTop: "0",
   }
  }
 }
},
...
}

而且效果很好。。。但它打破了每隔一次我使用相同的组件，正如预期的。
在我当前要更改边距的工作文件中，我很难覆盖默认样式。覆盖它的正确方法是什么

我曾经尝试过用类重写，但没有成功，我尝试过用内联样式进行重写

我知道有一种正确的方法，但我没有足够的经验来找到它。一种不正确但有效的方法是将组件包装在一个div中并在其上使用负边距，但我希望用正确的方法来纠正它，因为它在以后也会很有用

谢谢


编辑：我正在尝试设置样式的组件

renderFormats(){
 const { formats } = this.state;
 var formatsDOM = undefined;
 if(formats !== undefined && this.state.selectedFormat !== undefined){
  formatsDOM =
   <Select
    value={this.state.selectedFormat}
    onChange={this.onExportChange.bind(this)}
    disabled={!this.state.customFormatIsSelected}                                    
    inputProps={{
    name: 'Format',
    id: 'FormatInput',                                                           
    }}                                                                               
   >
   {formats.map( format => this.renderFormatEntry(format))}                         
  </Select>                                                                            
 }
return formatsDOM;                                                                           
}

renderFormats（）{
const{formats}=this.state；
var formatsDOM=未定义；
if（格式！==未定义&&this.state.selectedFormat！==未定义）{
格式域=
{formats.map（format=>this.renderformattery（format））}
}
返回格式DOM；
}
如果您使用的是
TextField
，那么您需要通过
InputProps
指定
formControl
类。如果您使用的是较低级别的组件（
formControl
、
InputLabel
和
Select
），那么您需要一个自定义的
Input
组件（在我的示例中称为
InputNoMargin
），指定
formControl
类，然后使用
Select
的
input
属性指定该组件

下面的示例使用较低级别的组件将此样式应用于文本输入
TextField
、选择
TextField
、以及“合成的”
select

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles({
  formControl: {
    "label + &": {
      marginTop: 0
    }
  }
});

const currencies = [
  {
    value: "USD",
    label: "$"
  },
  {
    value: "EUR",
    label: "€"
  },
  {
    value: "BTC",
    label: "฿"
  },
  {
    value: "JPY",
    label: "¥"
  }
];

const InputNoMargin = props => {
  const inputClasses = useStyles(props);
  return <Input {...props} classes={inputClasses} />;
};
export default function TextFields() {
  const inputClasses = useStyles();
  const [values, setValues] = React.useState({
    name: "Cat in the Hat",
    currency: "EUR"
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form>
      <TextField
        id="standard-name"
        label="Name"
        value={values.name}
        InputProps={{ classes: inputClasses }}
        onChange={handleChange("name")}
        margin="normal"
      />
      <br />
      <TextField
        id="standard-select-currency"
        select
        label="Select"
        value={values.currency}
        onChange={handleChange("currency")}
        InputProps={{ classes: inputClasses }}
        helperText="Please select your currency"
        margin="normal"
      >
        {currencies.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
      <br />
      <FormControl>
        <InputLabel htmlFor="composed-select">Composed Select</InputLabel>
        <Select
          value={values.currency}
          onChange={handleChange("currency")}
          inputProps={{ id: "composed-select", name: "composed-select" }}
          input={<InputNoMargin />}
        >
          {currencies.map(option => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </form>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/Input”导入输入；
从“@material ui/core/Select”导入选择；
const useStyles=makeStyles({
表单控制：{
“标签+&”：{
玛金托普：0
}
}
});
常量货币=[
{
价值：“美元”，
标签：“$”
},
{
价值：“欧元”，
标签：€“
},
{
值：“BTC”，
标签：“฿”
},
{
价值：“日元”，
标签：“%”
}
];
常量InputNoMargin=props=>{
常量输入类=使用样式（道具）；
返回；
};
导出默认函数TextFields（）{
常量inputClasses=useStyles（）；
const[values，setValues]=React.useState({
姓名：“帽子里的猫”，
货币：“欧元”
});
const handleChange=name=>event=>{
setValues（{…值，[名称]：event.target.value}）；
};
返回(


{currences.map（选项=>(
{option.label}
))}


组合选择
{currences.map（选项=>(
{option.label}
))}
);
}

你是对的，我没有显示足够的代码。我想编辑“选择”MUI组件，我编辑了我的帖子并添加了组件本身。我使用
Select
在我的示例中添加了另一个案例。如果你使用
Select
而不是
TextField
，那么它意味着
FormControl
和
InputLabel
由您的代码单独控制。请同时包含该代码。