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

Question

来自 grommet 的样式化 DateInput 。 我试着用这种方式改变颜色。

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>

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

Answer 1

您可以通过inputProps组件的 inputProps 控制图标。

使用format道具时，图标被渲染为输入的一部分（即 MaskedInput），并且输入接受允许图标自定义的inputProps ，如下所示： inputProps={{ icon: <Calendar color="red" /> }}

这是一个完整的工作示例：

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

注意：当不使用 DateInput 上的format属性时，可以通过buttonProps属性而不是inputProps来控制图标渲染，更多细节请参见垫圈的文档。