需要在樣式化的 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來控制圖標渲染，更多細節請參見墊圈的文檔。