What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';

const MyButton = styled(Button)`
  font-size: 11px;
`;

<MyButton
     variant="outlined"
     color="primary"
     size="small"
     disableElevation
     endIcon={<ArrowForwardIosIcon />}
>
     CLICK ME
</MyButton>

I'm wondering how to adjust the size of the endIcon. While I can do it in Chrome dev tools, I don't know what exactly to add in the MyButton definition. Perhaps something along these lines could work:

  &.MuiButtonendIcon {
    color: green;
    font-size: 15px;
  }

Answer №1

Here's how I tackled the issue:

 const MyButton = styled(Button)`
  *:first-of-type svg{
    font-size: 50px;
    color: green;
  }
`;

Answer №2

To customize the appearance of the specific endIcon, you can target the svg element and adjust its font-size property as shown below:

 const StyledButton = styled(Button)`
  & .MuiButton-endIcon svg {
    font-size: 50px;
    color: green;
  }
`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

Is it possible to customize the color of an SVG image within Next.js using next/image?

import Image from 'next/image' ... <Image src="/emotion.svg" alt="emtion" width={50} height={50} /> I am trying to change the color of the SVG using next/image. However, applying the following CSS rule does not seem ...

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

Fluid div causing navigation to display improperly

I am currently working on a navigation design where I want to have an image above each list item instead of having individual images for each item. It looks great when the screen is at full size, but as soon as I minimize it, the list items start stacking ...

Optimal method for managing errors in Flask when handling AJAX requests from the front end

I'm currently working on a React application that communicates with a Python Flask server. One of the features I am adding allows users to change their passwords. To do this, an AJAX request is sent from React to Flask, containing both the old and ne ...

Instructions on how to activate scrolling for a div element that becomes visible upon clicking a button

When a button in the navbar is clicked, a div appears with a height that exceeds the viewport/page size. How can I enable scrolling for the entire page when this happens? I attempted to use overflow: scroll, but it only applied scrolling to the internal d ...

Adding the <a> tag causes Superfish to malfunction

I've been struggling to get the latest Superfish menu code working with lists that include the <a> tag. I've double-checked everything, but it seems like I'm missing something obvious. Can anyone help me figure out what's wrong? ...

Utilizing Bootstrap's Multi-Grid System

I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

Ways to ensure that the ul navigation bar spans the entire bottom of the page evenly (without resorting to using table

This question has been previously raised on Stack Overflow with an insightful answer provided. However, I am encountering a specific problem in implementing it. My objective is to have a navigation bar (nav consisting of ul and its li items) occupy the en ...

Why do React JS array objects reset when being updated?

I am working with an array of objects that contain IDs and prices. Whenever the onClick event is triggered, it updates the price of a specific object. However, upon clicking the event again, I noticed that the previously updated item's price gets rese ...

What is the best way to add new elements at a specific index using useState and splice or push?

My challenge is to add new elements to an array and update the state based on that array. However, I am facing an issue where the state update does not reflect in the component rendering. Note: I am unsure of how to utilize splice effectively. (I intended ...

Having trouble understanding why the useState hook is not being invoked when there is a change

I'm currently in the process of setting up a brand search functionality for my project. I need to search for a specific brand using the search bar and then find it within a prop passed to this component. I thought about utilizing the useState hook for ...

Switching Background Colors with CSS

Can you change background colors using only CSS3? I attempted to use keyframe animations, but they only transition the background color. I simply want the background color to change after 5 seconds with no transition or hover effects. If I can fade it in ...

Tips for incorporating an onClick event into a variable beyond the class extension

Currently utilizing React/Redux in this scenario. At the beginning of my code, outside of the class extends block, I have: const Question10 = () => (<div> <p>Insert question here</p> <input place ...

Tips for maintaining an open option list in MUI v5 Autocomplete when the option's button is clicked

Is there a way to incorporate a play button for each option within the MUI v5 Autocomplete component? The goal is for the button to allow users to click on it without selecting an option or closing the option list. You can view the example on codesandbox: ...

Dynamic Update of SetupProxy Target Available

Currently, I am working on a tenant application that combines Django backend and React.js as the frontend framework. To handle proxying requests to the backend server, I am using http-proxy-middleware. For various types of tenants, it is necessary to dynam ...

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

Please ensure that the configuration getter callback for the `style` component is a function and not `undefined`. Also, remember to capitalize component names when referencing them

While implementing the MUI library in my React Native project, I encountered an error stating [ERROR Invariant Violation: View config getter callback for component style must be a function (received undefined). Make sure to start component names with a cap ...

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...