如何使用带有 Material UI 图标的样式化组件

Question

我尝试使用覆盖“！”但是还是不行，有没有办法给它设置样式？我在网上到处看都帮不上忙。

    import React from 'react';
    import styled from 'styled-components';
    import SearchIcon from '@material-ui/icons/Search';
    
    export default function Search() {
      return (
        <Form>
          <SearchBar
            type='text'
            placeholder='Have a question? Search for answers…'
          />
          <MagnifyIcon />
        </Form>
      );
    }
    
    const SearchBar = styled.input``;
    
    const Form = styled.form``;
    
    const MagnifyIcon = styled(SearchIcon)`
      background-color: 'blue';
    `;

Answer 1

使用以下代码增加特异性。

<MagnifyIcon className={'override'} />

const MagnifyIcon = styled(SearchIcon)`
    &.override{
            background-color: 'blue';
        }
`