在 Material-ui Autocomplete 组件上设置文本颜色、轮廓和填充
Posted
技术标签:
【中文标题】在 Material-ui Autocomplete 组件上设置文本颜色、轮廓和填充【英文标题】：Setting text color, outline, and padding on Material-ui Autocomplete component 【发布时间】：2020-03-17 22:41:18 【问题描述】：我们想更改 Material-ui 自动完成组件上的文本颜色、轮廓和填充。
代码如下：
<FormControlLabel
label="Please enter desired service:"
labelPlacement="start"
control=
<Autocomplete
id="services"
options=props.serviceTypes
getOptionLabel=option => option.name
className=classes.inputRoot
style= width: 400, paddingLeft: 20
renderInput=params => (
<TextField
...params
label=""
className=classes.inputRoot
variant="outlined"
fullWidth
/>
)
onChange=setService
/>
/>
我们可以通过这样的代码改变 TextInput 颜色
InputProps=
className: classes.inputColor
但是以这种方式应用样式会影响自动完成功能（它会失去自动完成功能并且表现得像普通的 TextField）。
我们尝试了许多样式和类名选项，但均无济于事。
感谢任何建议。
【问题讨论】：
我建议使用代码框或类似示例重现该问题，并使用链接编辑您的帖子。 【参考方案1】：这是您尝试过的方法（就样式而言有效，但破坏了自动完成功能）：
renderInput=params => (
<TextField
...params
label=""
InputProps=
className: classes.inputColor
variant="outlined"
fullWidth
/>
)
上述方法会导致问题，因为Autocomplete 组件passes InputProps 作为params 的一部分传递给TextField，因此显式传递的InputProps 将完全替换params 中的InputProps。
相反，您应该利用inputRoot CSS class for the Autocomplete component：
<Autocomplete classes=inputRoot: classes.inputRoot .../>
下面是一个有效的 v4 示例（下方的 v5 示例），它自定义了输入和标签的文本颜色、轮廓颜色和 padding-left。
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import makeStyles from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => (
root:
"& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)":
// Default transform is "translate(14px, 20px) scale(1)""
// This lines up the label with the initial cursor position in the input
// after changing its padding-left.
transform: "translate(34px, 20px) scale(1);"
,
inputRoot:
color: "purple",
// This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
'&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-child':
// Default left padding is 6px
paddingLeft: 26
,
"& .MuiOutlinedInput-notchedOutline":
borderColor: "green"
,
"&:hover .MuiOutlinedInput-notchedOutline":
borderColor: "red"
,
"&.Mui-focused .MuiOutlinedInput-notchedOutline":
borderColor: "purple"
));
export default function ComboBox()
const classes = useStyles();
return (
<Autocomplete
id="combo-box-demo"
classes=classes
options=top100Films
getOptionLabel=(option) => option.title
style= width: 300
renderInput=(params) =>
return (
<TextField
...params
label="Combo box"
variant="outlined"
fullWidth
/>
);
/>
);
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
title: "The Shawshank Redemption", year: 1994 ,
title: "The Godfather", year: 1972 ,
title: "The Godfather: Part II", year: 1974 ,
title: "The Dark Knight", year: 2008 ,
title: "12 Angry Men", year: 1957 ,
title: "Schindler's List", year: 1993 ,
title: "Pulp Fiction", year: 1994 ,
title: "The Lord of the Rings: The Return of the King", year: 2003 ,
title: "The Good, the Bad and the Ugly", year: 1966 ,
title: "Fight Club", year: 1999 ,
title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 ,
title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 ,
title: "Forrest Gump", year: 1994 ,
title: "Inception", year: 2010 ,
title: "The Lord of the Rings: The Two Towers", year: 2002 ,
title: "One Flew Over the Cuckoo's Nest", year: 1975 ,
title: "Goodfellas", year: 1990 ,
title: "The Matrix", year: 1999 ,
title: "Seven Samurai", year: 1954 ,
title: "Star Wars: Episode IV - A New Hope", year: 1977 ,
title: "City of God", year: 2002 ,
title: "Se7en", year: 1995 ,
title: "The Silence of the Lambs", year: 1991 ,
title: "It's a Wonderful Life", year: 1946 ,
title: "Life Is Beautiful", year: 1997 ,
title: "The Usual Suspects", year: 1995 ,
title: "Léon: The Professional", year: 1994 ,
title: "Spirited Away", year: 2001 ,
title: "Saving Private Ryan", year: 1998 ,
title: "Once Upon a Time in the West", year: 1968 ,
title: "American History X", year: 1998 ,
title: "Interstellar", year: 2014 ,
title: "Casablanca", year: 1942 ,
title: "City Lights", year: 1931 ,
title: "Psycho", year: 1960 ,
title: "The Green Mile", year: 1999 ,
title: "The Intouchables", year: 2011 ,
title: "Modern Times", year: 1936 ,
title: "Raiders of the Lost Ark", year: 1981 ,
title: "Rear Window", year: 1954 ,
title: "The Pianist", year: 2002 ,
title: "The Departed", year: 2006 ,
title: "Terminator 2: Judgment Day", year: 1991 ,
title: "Back to the Future", year: 1985 ,
title: "Whiplash", year: 2014 ,
title: "Gladiator", year: 2000 ,
title: "Memento", year: 2000 ,
title: "The Prestige", year: 2006 ,
title: "The Lion King", year: 1994 ,
title: "Apocalypse Now", year: 1979 ,
title: "Alien", year: 1979 ,
title: "Sunset Boulevard", year: 1950 ,
title:
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
year: 1964
,
title: "The Great Dictator", year: 1940 ,
title: "Cinema Paradiso", year: 1988 ,
title: "The Lives of Others", year: 2006 ,
title: "Grave of the Fireflies", year: 1988 ,
title: "Paths of Glory", year: 1957 ,
title: "Django Unchained", year: 2012 ,
title: "The Shining", year: 1980 ,
title: "WALL·E", year: 2008 ,
title: "American Beauty", year: 1999 ,
title: "The Dark Knight Rises", year: 2012 ,
title: "Princess Mononoke", year: 1997 ,
title: "Aliens", year: 1986 ,
title: "Oldboy", year: 2003 ,
title: "Once Upon a Time in America", year: 1984 ,
title: "Witness for the Prosecution", year: 1957 ,
title: "Das Boot", year: 1981 ,
title: "Citizen Kane", year: 1941 ,
title: "North by Northwest", year: 1959 ,
title: "Vertigo", year: 1958 ,
title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 ,
title: "Reservoir Dogs", year: 1992 ,
title: "Braveheart", year: 1995 ,
title: "M", year: 1931 ,
title: "Requiem for a Dream", year: 2000 ,
title: "Amélie", year: 2001 ,
title: "A Clockwork Orange", year: 1971 ,
title: "Like Stars on Earth", year: 2007 ,
title: "Taxi Driver", year: 1976 ,
title: "Lawrence of Arabia", year: 1962 ,
title: "Double Indemnity", year: 1944 ,
title: "Eternal Sunshine of the Spotless Mind", year: 2004 ,
title: "Amadeus", year: 1984 ,
title: "To Kill a Mockingbird", year: 1962 ,
title: "Toy Story 3", year: 2010 ,
title: "Logan", year: 2017 ,
title: "Full Metal Jacket", year: 1987 ,
title: "Dangal", year: 2016 ,
title: "The Sting", year: 1973 ,
title: "2001: A Space Odyssey", year: 1968 ,
title: "Singin' in the Rain", year: 1952 ,
title: "Toy Story", year: 1995 ,
title: "Bicycle Thieves", year: 1948 ,
title: "The Kid", year: 1921 ,
title: "Inglourious Basterds", year: 2009 ,
title: "Snatch", year: 2000 ,
title: "3 Idiots", year: 2009 ,
title: "Monty Python and the Holy Grail", year: 1975
];
这是使用styled 的 v5 等效示例：
import React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import styled from "@mui/material/styles";
const StyledAutocomplete = styled(Autocomplete)(
"& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)":
// Default transform is "translate(14px, 20px) scale(1)""
// This lines up the label with the initial cursor position in the input
// after changing its padding-left.
transform: "translate(34px, 20px) scale(1);"
,
"& .MuiAutocomplete-inputRoot":
color: "purple",
// This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
'&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-child':
// Default left padding is 6px
paddingLeft: 26
,
"& .MuiOutlinedInput-notchedOutline":
borderColor: "green"
,
"&:hover .MuiOutlinedInput-notchedOutline":
borderColor: "red"
,
"&.Mui-focused .MuiOutlinedInput-notchedOutline":
borderColor: "purple"
);
export default function ComboBox()
return (
<StyledAutocomplete
id="combo-box-demo"
options=top100Films
getOptionLabel=(option) => option.title
style= width: 300
renderInput=(params) =>
return (
<TextField
...params
label="Combo box"
variant="outlined"
fullWidth
/>
);
/>
);
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
title: "The Shawshank Redemption", year: 1994 ,
title: "The Godfather", year: 1972 ,
title: "The Godfather: Part II", year: 1974 ,
title: "The Dark Knight", year: 2008 ,
title: "12 Angry Men", year: 1957 ,
title: "Schindler's List", year: 1993 ,
title: "Pulp Fiction", year: 1994 ,
title: "The Lord of the Rings: The Return of the King", year: 2003 ,
title: "The Good, the Bad and the Ugly", year: 1966 ,
title: "Fight Club", year: 1999 ,
title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 ,
title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 ,
title: "Forrest Gump", year: 1994 ,
title: "Inception", year: 2010 ,
title: "The Lord of the Rings: The Two Towers", year: 2002 ,
title: "One Flew Over the Cuckoo's Nest", year: 1975 ,
title: "Goodfellas", year: 1990 ,
title: "The Matrix", year: 1999 ,
title: "Seven Samurai", year: 1954 ,
title: "Star Wars: Episode IV - A New Hope", year: 1977 ,
title: "City of God", year: 2002 ,
title: "Se7en", year: 1995 ,
title: "The Silence of the Lambs", year: 1991 ,
title: "It's a Wonderful Life", year: 1946 ,
title: "Life Is Beautiful", year: 1997 ,
title: "The Usual Suspects", year: 1995 ,
title: "Léon: The Professional", year: 1994 ,
title: "Spirited Away", year: 2001 ,
title: "Saving Private Ryan", year: 1998 ,
title: "Once Upon a Time in the West", year: 1968 ,
title: "American History X", year: 1998 ,
title: "Interstellar", year: 2014 ,
title: "Casablanca", year: 1942 ,
title: "City Lights", year: 1931 ,
title: "Psycho", year: 1960 ,
title: "The Green Mile", year: 1999 ,
title: "The Intouchables", year: 2011 ,
title: "Modern Times", year: 1936 ,
title: "Raiders of the Lost Ark", year: 1981 ,
title: "Rear Window", year: 1954 ,
title: "The Pianist", year: 2002 ,
title: "The Departed", year: 2006 ,
title: "Terminator 2: Judgment Day", year: 1991 ,
title: "Back to the Future", year: 1985 ,
title: "Whiplash", year: 2014 ,
title: "Gladiator", year: 2000 ,
title: "Memento", year: 2000 ,
title: "The Prestige", year: 2006 ,
title: "The Lion King", year: 1994 ,
title: "Apocalypse Now", year: 1979 ,
title: "Alien", year: 1979 ,
title: "Sunset Boulevard", year: 1950 ,
title:
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
year: 1964
,
title: "The Great Dictator", year: 1940 ,
title: "Cinema Paradiso", year: 1988 ,
title: "The Lives of Others", year: 2006 ,
title: "Grave of the Fireflies", year: 1988 ,
title: "Paths of Glory", year: 1957 ,
title: "Django Unchained", year: 2012 ,
title: "The Shining", year: 1980 ,
title: "WALL·E", year: 2008 ,
title: "American Beauty", year: 1999 ,
title: "The Dark Knight Rises", year: 2012 ,
title: "Princess Mononoke", year: 1997 ,
title: "Aliens", year: 1986 ,
title: "Oldboy", year: 2003 ,
title: "Once Upon a Time in America", year: 1984 ,
title: "Witness for the Prosecution", year: 1957 ,
title: "Das Boot", year: 1981 ,
title: "Citizen Kane", year: 1941 ,
title: "North by Northwest", year: 1959 ,
title: "Vertigo", year: 1958 ,
title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 ,
title: "Reservoir Dogs", year: 1992 ,
title: "Braveheart", year: 1995 ,
title: "M", year: 1931 ,
title: "Requiem for a Dream", year: 2000 ,
title: "Amélie", year: 2001 ,
title: "A Clockwork Orange", year: 1971 ,
title: "Like Stars on Earth", year: 2007 ,
title: "Taxi Driver", year: 1976 ,
title: "Lawrence of Arabia", year: 1962 ,
title: "Double Indemnity", year: 1944 ,
title: "Eternal Sunshine of the Spotless Mind", year: 2004 ,
title: "Amadeus", year: 1984 ,
title: "To Kill a Mockingbird", year: 1962 ,
title: "Toy Story 3", year: 2010 ,
title: "Logan", year: 2017 ,
title: "Full Metal Jacket", year: 1987 ,
title: "Dangal", year: 2016 ,
title: "The Sting", year: 1973 ,
title: "2001: A Space Odyssey", year: 1968 ,
title: "Singin' in the Rain", year: 1952 ,
title: "Toy Story", year: 1995 ,
title: "Bicycle Thieves", year: 1948 ,
title: "The Kid", year: 1921 ,
title: "Inglourious Basterds", year: 2009 ,
title: "Snatch", year: 2000 ,
title: "3 Idiots", year: 2009 ,
title: "Monty Python and the Holy Grail", year: 1975
];
相关答案：
Change border color on Material-UI TextField【讨论】：
我们对自动完成组件中的 notchedOutline 样式有类似的问题。这可以通过 InputProps 参数进行自定义并且可以工作，但会影响 AutoComplete 功能。我们已经尝试为输入设置这种样式，inputRoot 和 inputSelect 似乎都不起作用。在 AutoComplete 组件上覆盖 notchedOutline 的正确样式是什么？ @GregHouse 我添加了自定义大纲。 我希望我能对这个答案进行多次投票。谢谢一百万，@RyanCogswell。 @cyrf 这里的解决方案是为outlined 变体设置样式。如果您尝试设置standard 变体的下划线样式，请在此处查看我的答案：***.com/questions/57778393/…。
@July 在我的示例中已经自定义了文本颜色 (color: "purple")。我刚刚在我的示例中添加了 padding-left 的自定义。【参考方案2】：
我发现文档说有两种类型的“inputprops”
所以结果代码是
<Autocomplete
id="country-select-demo"
options=dialCodes
underlineStyle= display: 'none'
InputProps= disableUnderline: uderline
autoHighlight
getOptionLabel=(option) => option.phone
renderOption=(option) => (
<div className="w-100">
option.phone
</div>
)
renderInput=(params) => (
<TextField
// eslint-disable-next-line react/jsx-props-no-spreading
...params
disableUnderline=false
InputProps= ...params.InputProps, disableUnderline: true
// eslint-disable-next-line react/jsx-no-duplicate-props
inputProps=
...params.inputProps,
/>
)
/>
在上面的代码中我已经添加了两次输入道具。
-
InputProps= ...params.InputProps, disableUnderline: true
inputProps=...params.inputProps,
大写字母将完成这项工作，它会删除下划线。
【讨论】：
以上是关于在 Material-ui Autocomplete 组件上设置文本颜色、轮廓和填充的主要内容，如果未能解决你的问题，请参考以下文章
ReactJS + Material-UI：如何在每个 TableRow 中使用 Material-UI 的 FlatButton 和 Dialog？
ReactJS + Material-UI：如何在 Material-UI <Table/> 的 <TableRow/> 之间交替颜色？
Material-UI 无法解析 '@material-ui/core/styles/createMuiTheme