Personalize the font style of the icon property in Material UI Table when utilizing text in place of an icon

In my React app using Material UI table, I needed a custom event on the action button that displayed text instead of the usual icons for Add, Update, or Delete. Instead of creating my own icon, I opted to use text for the button like so...

<MaterialTable
                data={someData}
                actions= {[
                      {
                      icon: () => "My Custom Action",
                      iconProps: { style: { fontSize: "10px", color: "blue" } },
                      tooltip: "Search Transactions",
                      onClick: (event, rowData) => (
                          alert("You did a custom on action " + rowData)
                      )
                  }

However, the text displayed by the icon is too big and looks ugly in the table, as shown in the attached screenshot[![enter image description here][1]][1]

Is there a way to apply styles to make the text smaller and fit better within the table layout?

I attempted to use iconProps to style the text, but it didn't have any effect. [1]: https://i.sstatic.net/ysht7.png

Answer №1

Feel free to customize your options and design your own unique styles.

options={{
        rowStyle: { fontSize: "12px", color: "red" }
      }}

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

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

Text Description: "Important Information Hidden Beneath Persistent Bar"

I have a website with a sticky header (position: fixed), and despite adding extra padding to the body, the main content Header and part of the paragraph are still hidden behind the fixed header. This issue only occurs on the homepage and on screens smaller ...

Swiper V7 React is experiencing issues with numerous parameters not functioning properly

Here is the code snippet I have been working on: I am currently exploring the Swiper library documentation to understand its functionalities better. import React from "react"; // Direct React component imports import { Swiper, SwiperSlide } fro ...

When using Material UI GridTile, the actionIcon will not be shown if there is no title present

In my React application, I am utilizing Material-UI GridList to showcase some images. I am interested in adding an IconButton on top of the image in my GridTile component. Currently, I can achieve this by providing the button to the actionIcon prop. Howeve ...

Applying specific style properties in styled-components can vary based on certain conditions

Is it possible to apply multiple properties at once? const Button = styled.div` color: blue; opacity: 0.6; background-color: #ccc; ` I want to apply styles for the active state without having to specify conditions for each property individually. Ho ...

Creating dynamic DIVs that adjust fluidly to different screen

I have a section containing 4 centered divs. Here is what I want to achieve: When the screen width is over 1280px, display all 4 divs in a row. When the screen width is less than 1280px, show 2 divs per row. And when the screen width is under 640px, disp ...

Add two cells below a header with a colspan of one

I've been having trouble grouping the cells with the values { Lazy, Dog, Then, It } under a single header (with a colspan of 1) So far, I've attempted using div tags within the cells, creating multiple cells, and trying various combinations of w ...

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

I have implemented a data table from Vuetify in my project: <v-data-table :ref="`sortableTable${index}`" class="items-table-container" :headers="headers" :items="category.items" hide-default-footer> ...

What is the best way to change the font size in HTML?

https://i.sstatic.net/IjLvn.png After carefully analyzing the image provided, I encountered an issue while attempting to incorporate the code display:block. However, no changes were reflected. Can you identify what may be causing this discrepancy in my te ...

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

I thought enabling CORS would solve the issue, but it seems like the restrictions

This is my setup for an asp.net core web API: public void ConfigureServices(IServiceCollection services) { services.AddCors(o => o.AddPolicy("CorsPolicy", builder => { builder ...

How is it possible that Firebase is displaying undefined in my component, yet I can clearly view the object in console.log after reading from my database?

Using Next.js and Typescript in my project. I recently created a custom hook to read data from the firebase realtime database, which returns an array of objects. However, I am facing an issue where I am unable to pass this array to my component successful ...

Guide on how to iterate through the list of users within the component

Hello, I'm fairly new to working with react and I've encountered a challenge regarding implementing a loop within this component to display a list of all users. Despite trying numerous approaches, I haven't been able to figure it out. colum ...

Working with callback functions post updating state with hooks

I need some guidance on my current approach to utilizing callback functions. I am experiencing issues with the callback function after switching from Class to Hooks. Class Approach componentWillReceiveProps(nextProps) { if (typeof nextProps.checked != & ...

Creating a custom file using a predefined template in Node.js: Step-by-step guide

To streamline my app development process in React Native, I have a specific workflow for creating new components. For example, if I need to add a Button component: First, I create a new folder path: /src/components/Button Then, I create a file named Butt ...

Using styled-components in React

I came across this interesting code snippet in the styled-components documentation. Here it is: const Button = styled.button<{ $primary?: boolean; }>` background: ${props => props.$primary ? "#BF4F74" : "white"}; color: ${p ...

Exploring the power of caching fetch requests with Next.js version 14

Currently, I am retrieving data from Contentful's API to display on my page.tsx files. The process works well, but it seems like the data is being over-cached. Although the content I'm pulling rarely changes, I'd like it to fetch new data ev ...

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

Page for users to login using React

Struggling to create a login page in React due to the asynchronous nature of setState. Upon submission, the state is not updating with form values, only displaying old initial values. How can I ensure that the submit function receives the new values? Is ...

Error: Attempt to use a non-function object. Issue encountered while attempting to make a POST request using the Mern stack with fetch

I encountered an issue while working on a MERN stack project where I am trying to send a post request to create a new user in MongoDB. The error message states that "TypeError: Object(...) is not a function". This problem has left me puzzled as I have only ...