[英]Need to change the svg icon color in a styled DateInput
Styled DateInput from grommet .来自 grommet 的样式化 DateInput 。 I tried changing the color this way.
我试着用这种方式改变颜色。
const CalenderComponent = styled(DateInput)`
svg {
fill: #fff000 !important;
stroke: #fff000 !important;
path{
fill: #fff000 !important;
stroke: #fff000 !important;
}
}
`;
Component:零件:
<CalenderComponent
className='dateInput'
format="mm/dd/yyyy"
></CalenderComponent>
You can control the icon via inputProps
of the DateInput component.您可以通过
inputProps
组件的 inputProps 控制图标。
When using format
prop, the icon is being rendered as part of the the input (ie MaskedInput), and the input accepts inputProps
which allows icon customization as follows: inputProps={{ icon: <Calendar color="red" /> }}
使用
format
道具时,图标被渲染为输入的一部分(即 MaskedInput),并且输入接受允许图标自定义的inputProps
,如下所示: inputProps={{ icon: <Calendar color="red" /> }}
Here is a fully working example:这是一个完整的工作示例:
import React from 'react';
import { Grommet, Box, DateInput } from 'grommet';
import { Calendar } from 'grommet-icons';
import { grommet } from 'grommet/themes';
export const Format = () => {
const [value, setValue] = React.useState('');
const onChange = event => {
...
};
return (
<Grommet theme={grommet}>
<Box align="center" pad="large">
<Box width="medium">
<DateInput
inputProps={{ icon: <Calendar color="red" /> }}
format="mm/dd/yyyy"
value={value}
onChange={onChange}
/>
</Box>
</Box>
</Grommet>
);
};
Note: when not using the format
prop on DateInput, one could control the icon rendering via the buttonProps
prop instead of inputProps
, more details on the grommet's documentations .注意:当不使用 DateInput 上的
format
属性时,可以通过buttonProps
属性而不是inputProps
来控制图标渲染,更多细节请参见垫圈的文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.