如何在 Material-UI 自动完成控件中自定义填充?

Posted

技术标签:

【中文标题】如何在 Material-UI 自动完成控件中自定义填充?【英文标题】:How can I customize the padding in a Material-UI autocomplete control? 【发布时间】:2020-06-17 06:32:53 【问题描述】:

我需要自定义 material-ui 自动完成控件,使其不那么高。我找到了一个示例,可以很好地使用自动完成的 TextField 上的 createMuiTheme 更改 MuiOutlinedInput 轮廓颜色。密码箱在这里:Code Example

这是我的主题覆盖代码,我为输入类的填充添加了覆盖:

const theme = createMuiTheme(
  overrides: 
    MuiOutlinedInput: 
      root: 
        "& $notchedOutline": 
          borderColor: "green"
        ,
        "&:hover $notchedOutline": 
          borderColor: "red"
        ,
        "&$focused $notchedOutline": 
          borderColor: "purple"
        ,
        "& $input": 
          padding: "1px"
        
      
    
  
);

这是组件代码:

 <Autocomplete
  id="country-select-demo"
  style= width: 300 
  options=countries
  getOptionLabel=option => option.label
  renderInput=params => (
    <MuiThemeProvider theme=theme>
      <TextField ...params label="Countries" variant="outlined" />
    </MuiThemeProvider>
  )
/>

问题是我的输入类填充被这个覆盖了:

.MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input

我可以做些什么来使我的自定义不会被上述内容覆盖?除了 createMuiTheme 之外,我也对其他技术持开放态度,或者可能对自动完成的其他部分进行样式设置。我只需要让它不那么高。

谢谢!

【问题讨论】:

【参考方案1】:

这是为您的覆盖获取适当的CSS specificity 的问题。增加特异性的一种简单方法是重复课程。

在下面的例子中,我使用&amp;&amp;&amp; $input,相当于拥有.MuiOutlinedInput-root.MuiOutlinedInput-root.MuiOutlinedInput-root .MuiOutlinedInput-input

const theme = createTheme(
  overrides: 
    MuiInputLabel: 
      outlined: 
        transform: "translate(14px, 12.5px) scale(1)"
      
    ,
    MuiOutlinedInput: 
      root: 
        "& $notchedOutline": 
          borderColor: "green"
        ,
        "&:hover $notchedOutline": 
          borderColor: "red"
        ,
        "&$focused $notchedOutline": 
          borderColor: "purple"
        ,
        "&&& $input": 
          padding: "1px"
        
      
    
  
);

另一个有点难看的选项,但更明显的是您要覆盖的默认样式如下:

const theme = createTheme(
  overrides: 
    MuiInputLabel: 
      outlined: 
        ".MuiAutocomplete-root &:not(.MuiInputLabel-shrink)": 
          transform: "translate(14px, 12.5px) scale(1)"
        
      
    ,
    MuiOutlinedInput: 
      root: 
        "& $notchedOutline": 
          borderColor: "green"
        ,
        "&:hover $notchedOutline": 
          borderColor: "red"
        ,
        "&$focused $notchedOutline": 
          borderColor: "purple"
        
      
    ,
    MuiAutocomplete: 
      inputRoot: 
        '&&[class*="MuiOutlinedInput-root"] $input': 
          padding: 1
        
      
    
  
);

请注意,您仍然需要将&amp; 加倍,以获得优于默认样式的特异性。此版本特定于自动完成,而不是影响所有概述的输入。

如果您不想将此覆盖应用于主题中的整个应用程序,您可以使用 withStyles 自定义自动完成组件,如下所示:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import  withStyles  from "@material-ui/core/styles";

const NoPaddingAutocomplete = withStyles(
  inputRoot: 
    '&&[class*="MuiOutlinedInput-root"] $input': 
      padding: 1
    ,
    "& .MuiOutlinedInput-notchedOutline": 
      borderColor: "green"
    ,
    "&:hover .MuiOutlinedInput-notchedOutline": 
      borderColor: "red"
    ,
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": 
      borderColor: "purple"
    
  ,
  input: 
)(Autocomplete);
export default function CountrySelect() 
  return (
    <NoPaddingAutocomplete
      id="country-select-demo"
      style= width: 300 
      options=countries
      getOptionLabel=option => option.label
      renderInput=params => (
        <TextField ...params label="Countries" variant="outlined" />
      )
    />
  );

相关答案:

Setting text color, outline, and padding on Material-ui Autocomplete component

相关文档:

JSS documentation for &amp; Explanation of how CSS Specificity works

【讨论】:

@cakidnyc 我为我的答案添加了几个替代方案。 谢谢。这些真的很有帮助! 谢谢!阅读你的另一篇文章真的很有帮助。尤其是自动完成 css api 的链接,它有助于揭示很多谜团。 @cakidnyc 第三个示例警告现已修复。在主题覆盖中,您可以引用组件的不同 CSS 类(例如 $input),而无需在覆盖中显式定义它们,但是对于 withStyles/makeStyles,您需要定义任何您想要的类(例如 input: )参考。它仍然有效的唯一原因是因为它退回到仅用 input 替换它,这意味着它将元素与 &lt;input&gt; 标签匹配,而 &lt;input&gt; 标签恰好仍然针对所需的元素。 @kishore 我已将相关的 JSS 文档链接添加到我的答案中。 &amp; 解析为为父规则生成的类(在这种情况下为.MuiAutocomplete-inputRoot)。将其加倍 (&amp;&amp;) 只是重复该类名(例如 .MuiAutocomplete-inputRoot.MuiAutocomplete-inputRoot),这会增加规则的 specificity。

以上是关于如何在 Material-UI 自动完成控件中自定义填充?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 onChange 后清除 Material-ui 中的自动完成输入?

使用 React Material-UI 自动完成始终显示默认选项

Material-ui 自动完成过滤列表

从 material-ui 自动完成组合框中清除所有选定的值

设置 TextField InputProps 时,Material-UI 自动完成功能不起作用

material-ui TextField 禁用浏览器自动完成