- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们想要更改 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
}}
但是以这种方式应用样式会影响自动完成功能(它会失去自动完成功能并表现得像普通的文本字段)。
我们尝试了多种样式和 className 选项,但均无济于事。
感谢任何建议。
最佳答案
这是您尝试过的方法(就样式而言有效,但破坏了自动完成功能):
renderInput={params => (
<TextField
{...params}
label=""
InputProps={{
className: classes.inputColor
}}
variant="outlined"
fullWidth
/>
)}
上述方法会导致问题,因为Autocomplete
组件passes InputProps作为传递给 TextField
的 params
的一部分,因此显式传递的 InputProps
将完全替换 中的
.InputProps
参数
相反,您应该利用 inputRoot
CSS class for the Autocomplete component :
<Autocomplete classes={{inputRoot: classes.inputRoot}} .../>
下面是一个有效的 v4 示例(下面是 v5 示例),用于自定义输入和标签的文本颜色、轮廓颜色以及左内边距。
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);"
},
"&.Mui-focused .MuiInputLabel-outlined": {
color: "purple"
}
},
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: 400 }}
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);"
},
"&.Mui-focused .MuiInputLabel-outlined": {
color: "purple"
},
"& .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-of-type': {
// 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: 400 }}
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 }
];
相关答案:
关于reactjs - 在 Material-ui 自动完成组件上设置文本颜色、轮廓和填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58984406/
我有一个不规则形状的元素(比方说图标)。 我想要围绕它的某种轮廓,以符合特定颜色的形状。此轮廓的颜色必须均匀地围绕形状,即与形状各处的距离相同,并且没有颜色渐变。 我发现使用的是 css 选项 fil
这部分代码我总是出错 &contours = ((contours.h_next) -> h_next); contours.h_next = ((contours.h_next) -> h_next
我通过 css (:after) 创建了 3 个圆圈,使用一些背景颜色,边框看起来不规则。有什么解决办法吗? 在这里您可以看到问题:https://flowersliving.com/cpt_01/a
使用这个: background: -moz-linear-gradient(315deg, transparent 10px, black 10px); 如何在不使用 border 的情况下围绕它创
我想计算二元 NxM 矩阵中某个形状周围的凸包。凸包算法需要一个坐标列表,所以我采用 numpy.argwhere(im) 来获得所有形状点坐标。然而,这些点中的大多数对凸包没有贡献(它们位于形状的内
如何删除从下拉菜单中选择元素时显示的虚线边框/轮廓? 您可以看到显示了虚线边框/轮廓,我想删除它(在 Firefox 中截取的屏幕截图)。 尝试下面的解决方案并没有删除它: select:focus,
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎是题外话,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或include a min
我正在使用 Qt4 GraphicsView 框架绘制一些多边形,并且允许用户放大和缩小绘图。我希望多边形随着用户在 View 中更改缩放级别(比例)而变得越来越小,但是有没有办法使轮廓厚度始终保持不
我在 C# 中有一个 Vector3 点列表,我需要计算这些点的凹轮廓。确实有很多引用资料,尤其是 -convex- 分辨率(我已经成功实现了,多亏了 graham 的算法), 但是,由于我现在需要有
注: r 中的解决方案, python , java ,或者如果需要,c++或 c#是需要的。 我正在尝试根据运输时间绘制轮廓。更清楚地说,我想将具有相似旅行时间(比如说 10 分钟间隔)的点聚集到特
假设我在图像上找到了轮廓。在图像 2 上找到此轮廓位置的最佳方法是什么? 我看到两个选项:要么我用白线绘制轮廓并匹配图像 2 上的图像,要么我以某种方式(这甚至可能吗?)直接匹配图像 2 上的轮廓。
我一直在研究细菌的图像,希望从图像中获取细菌的数量,还需要根据特定的形状和大小对细菌进行分类。 我正在使用opencv python。现在,我使用轮廓法。 contours,hierarchy
我无法区分以下两个轮廓。 cv2.contourArea两者的值相同。在Python中有什么功能可以区分它们吗? 最佳答案 要区分填充轮廓和未填充轮廓,可以在使用 cv2.findContours 查
是否可以根据 Activity 配置文件的某些表达式来注册bean前任。 @Profile(!prod) @Profile(name!="test") 我有一种情况,我需要根据许多不同的条件配
我有一个由多个 CAShapeLayer 组成的 3D 相似图形对象。必须抚摸所有形状(天花板和墙壁)。有些形状共享一条边 - 这似乎是问题的根源。 然而,轮廓似乎是围绕另一个形状的现有轮廓绘制的。所
有谁知道,是否可以在用户使用顺序导航(TAB 按钮)时在输入元素周围显示轮廓,并在用户用鼠标单击此输入元素时隐藏轮廓?有没有人实现过这种行为? 我在 CSS 文件中的 :focus 选择器上使用这个属
这是我在 StackOverflow 上的第一个问题,所以我会尝试以正确的方式格式化它。 基本上,我有一个带有边框和轮廓的 div。悬停时,div 也会有一个阴影,当然,它应该在轮廓之外。这适用于所有
我在 Opencv 2.9 (C++) 中使用 findContours。我得到的是一个 vector> contours,它描述了我的轮廓。假设我有一个矩形,其轮廓存储在 vector 中。接下来我
我有一个 div,它有附加的子 div,定位在父 div 之外。 我希望父 div 有一个轮廓 onclick,但轮廓延伸到子 div 周围。 有没有办法让轮廓完全围绕父 div。 我不能使用边框,因
我正在尝试在彩色图标周围设置实线边框。 应该足够直截了当,显然它适用于字形,但我无法让它适用于 我试过... // like this fiddle: http://jsfiddle.net/9s
我是一名优秀的程序员,十分优秀!