【问题标题】:How to use styled Components with Material UI Icons如何使用带有 Material UI 图标的样式化组件
【发布时间】:2022-01-25 16:52:34
【问题描述】:

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

    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';
    `;

【问题讨论】:

    标签: reactjs material-ui styled-components


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-05-08
      • 2017-12-13
      • 2022-08-03
      • 2021-06-02
      • 2021-01-08
      • 2021-07-17
      • 2019-09-09
      • 2021-10-05
      相关资源
      最近更新 更多