覆盖单个css样式/标签

Posted 2023-02-21

【中文标题】覆盖单个css样式/标签

【英文标题】：Override single css style / tag

【发布时间】：2019-12-10 12:21:56

【问题描述】：

我有一个大型 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;                                                                           

【问题讨论】：

如果你使用Select而不是TextField，那么这意味着FormControl和InputLabel被你的代码分别控制。请同时包含该代码。

【参考方案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>
  );

【讨论】：

你说得对，我没有显示足够的代码。我想编辑“选择”MUI 组件，我编辑了我的帖子并添加了组件本身。

我使用Select在我的示例中添加了另一个案例。