I tried using the override "!" but that still didnt work, is there a way to style it? Everywhere I looked online couldnt help.

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

CodePudding user response：

increase specifity with the following code.

<MagnifyIcon className={'override'} />

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