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

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

How to use styled Components with Material UI Icons

reactjs

material-ui

styled-components