javascript - 覆盖单个 css 样式/标签

Question

我有一个很大的 React 应用程序，它现在使用 Material UI 4.3.0。

我试图删除 label + .MuiInput-formControl 的 margin-top 样式。 (它是一个 select mui 组件)我在我的 App.js 中使用了 'overrides' 标签，就像我以前做的那样

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

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

我试过用类覆盖，但没有成功，尝试做 const styles = theme => ({ overrides.... etc 正如我在上面的 createmuitheme 上写的那样，并尝试使用内联样式.

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