Need to change the svg icon color in a styled DateInput

Question

Styled DateInput from grommet . 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>

Code being rendered in my browser:

Answer 1

You can control the icon via inputProps of the DateInput component.

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" /> }}

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 .