Javascript 需要更改样式化DateInput中的svg图标颜色

从grommet输入的样式化日期。我试着用这种方法改变颜色

const CalenderComponent = styled(DateInput)`
  svg {
    fill: #fff000 !important;
    stroke: #fff000 !important;
    path{
      fill: #fff000 !important;
      stroke: #fff000 !important;
    }
  }
`;

组件：

<CalenderComponent
  className='dateInput'
  format="mm/dd/yyyy"
></CalenderComponent>

正在我的浏览器中呈现的代码：

---

您可以通过DateInput组件的

inputProps

控制图标

当使用

format

prop时，图标作为输入的一部分呈现（即MaskedInput），输入接受

inputProps

，这允许按如下方式自定义图标：

inputProps={{{icon:}}

以下是一个完全有效的示例：

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>
  );
};

从“React”导入React；
从'Grommet'导入{Grommet，Box，DateInput}；
从“套圈图标”导入{Calendar}；
从'grommet/themes'导入{grommet}；
导出常量格式=（）=>{
const[value，setValue]=React.useState（“”）；
const onChange=事件=>{
...
};
返回(
);
};

注意：在日期输入时不使用

格式

道具时，可以通过

按钮操作

道具而不是

输入道具

来控制图标的呈现，更多有关来自grommet的日期输入的详细信息：