如何使用带有 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';
        }
`

Answer 2

要执行此操作而无需在图标中包含类名称，您可以使用

&&

运算符来代替：

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

并使用这样的图标：

<MagnifyIcon />