覆盖单个css样式/标签

Question

我有一个大型 React 应用，现在使用 Material UI 4.3.0。

我试图删除label + .MuiInput-formControl 的margin-top 样式。 （它是一个select mui 组件） 我在我的 App.js 中使用了“覆盖”标签，就像我以前一样，做

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

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

我尝试过覆盖类，但未成功，尝试按照我在上面的 createmuitheme 中所写的方式执行 const styles = theme => ({ overrides.... etc，并尝试使用内联样式。

我知道有正确的方法可以做到这一点，但我没有足够的经验来找到它。一种不正确但可行的方法是将组件包装在 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;                                                                           
}

Answer 1

如果您使用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>
  );
}