Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS?

https://mui.com/components/buttons/

The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend.

I attempted to override the theme, however, it did not target the element in this manner. Please advise if achieving this is feasible.

createTheme({
 components: {
  MuiButton: {
    styleOverrides: {
      root: {
        '&::first-letter': {
          textTransform: 'uppercase',
        },
      },
    }
  }
}
});
javascriptcssreactjsmaterial-ui

Answer №1

One method I use is to add the following code to makeStyles within the page or component:

  parentOfButton: {
    '& .MuiButton-root': {
      textTransform: 'none',
    },
  },

<Box className={classes.parentOfButton}>
  <Button>Text</Button>
</Box>

UPDATE

I also experimented with achieving the same effect in createTheme, and found success using this method:

  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
  },

Answer №2

Unfortunately, the button element does not support pseudo-elements like ::first-letter.

A workaround that I have found effective is to wrap the text in a Typography component, which does have support for this CSS pseudo-class.

<Button>
    <Typography
        sx={{
            "&::first-letter": {
                textTransform: "capitalize",
            },
        }}
    >
    text
    </Typography>
</Button>

Answer №3

In order to capitalize the first letter of text using styles, I had to enclose the text in a specific tag. Here is an example:

  .button {
    & > *::first-letter {
      text-transform: uppercase;
    }
  }

  <Button className={s.button}>
    <p>some text</p>
  </Button>

Answer №4

Using 'inherit' for text-transform should help resolve the problem

MuiButton: {
  styleOverrides: {
    root: {
      textTransform: 'inherit',
      },
    },
},

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

Using a combination of ASP.NET webpage and JavaScript, a dynamic webpage with a repe

I am new to using VB and integrating JavaScript. I have a simple question, but I'm having trouble figuring it out for some reason. I am struggling to properly construct an IF-statement. Can you please help me? I have searched and googled, but have no ...

javascriptasp.netrepeater

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 != & ...

reactjsreact-hooks

What can I do to adjust the Navigation Item and Dropdown placement?

I've been working with Bootstrap dropdowns, but they're not aligning correctly for some reason. I've tried multiple solutions like updating my Bootstrap versions, but none of them seem to be working. Here is the code: <script src=" ...

htmlcssnavigationbootstrap-5

Unable to invoke function on HTML element

Recently, I've ventured into writing jQuery-like functions in Vanilla JS. While my selectors seem to be working fine, I encounter an "is not a function" error when trying to call the append function on an HTML element. var $ = function(){ this.se ...

javascripthtml

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

What steps do I need to take to modify the MUI Badge component and insert custom text inside?

Is there a way to replace the number with a label next to a new row added to my table using MUI Badge? For example, instead of displaying a number like 4, I want it to show the word "New" as shown in this image: enter image description here This is the co ...

javascriptreactjsmaterial-ui

steps to retrieve JSON object using Angular service

In the login.js file, I have a module with a method called loginUser structured like this: ...function loginUser(){ var user={ email:loginVM.Email, password:loginVM.pwd }; console.log(user); loginService.login ...

javascripthtmlangularjsjson

Migration processes encountering delays due to running nodes

When running migrations in Node, I am encountering a timeout error. The specific error message is: Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. Here is the ...

javascriptnode.jsknex.js

JSON Array Position Sequence

I have a system that takes input in the form of lines of text stored as an array, for example: array[123,556,"test",0,0]. By using val().split('\n'), I am able to add each new line to the array so that each line index is incremented by 1. He ...

javascriptarraysjsonindexing

Possible issue with accurate indexing causing caption error with API images in React

Continuing from: Implementing a lightbox feature in react-multi-carousel for my ReactJS app My application utilizes react-images for the lightbox functionality and react-carousel-images for the carousel. The API provides a title and image data. The issue ...

javascriptreactjsreact-imagereact-multi-carousel

Animating the Three.js Globe camera when a button is clicked

Struggling to create smooth camera movement between two points, trying to implement the function below. Currently working with the Globe from Chrome Experiments. function changeCountry(lat, lng) { var phi = (90 - lat) * Math.PI / 180; var theta = ...

javascriptjquerycamerathree.jstween

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

htmlcssangularjsangular-material

Looking to locate a specific video within the DOM

Is there a way to detect the presence of video content in the DOM, regardless of how it is inserted? I attempted using phantomJS but was unable to find a satisfactory method. ...

javascriptjquerydomvideophantomjs

When a React component written in TypeScript attempts to access its state, the object becomes

Throughout my app, I've been consistently using a basic color class: const Color = { [...] cardBackground: '#f8f8f8', sidebarBackground: '#eeeeee', viewportBackground: '#D8D8D8', [...] } export defau ...

javascriptreactjstypescriptwebpackreact-redux

Transmitting a nested data structure through a POST request

Currently, I have a Node Express server running to validate vouchers and send responses back to clients. Here is the code snippet: app.post('/voucher', function (request, response) { // Code logic here... }); This code is just an example an ...

jsonnode.jsreactjsexpressquery-string

In Next.js, the Typescript compiler does not halt when an error occurs

I am looking to incorporate Next.js with TypeScript into my project. I followed the official method of adding TypeScript to Next.js using npx create-next-app --typescript. Everything seemed fine, but when a TypeScript error occurs (e.g. const st: string = ...

javascriptreactjstypescriptnext.jstsconfig

Having two menus displayed simultaneously on the screen is not feasible

Achieving the Desired Screen Layout To create a screen layout with two menus, one being the burger menu generated using createDrawerNavigator from react-navigation (located in the top left corner) and the other menu as a bottom button created by createBot ...

javascriptreact-navigationreact-navigation-v6

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

javascripthtmlcssgoogle-chrome

The target for ajaxSubmit is being duplicated instead of being replaced

I encountered a problem with the code below: $('#refresh').click(function () { alert($('.report-container').length); $('.report-container').each(function () { var accordian = this; var url = $(this) ...

javascriptjqueryajaxajaxform

Pass an object along with the rendering of the page using ExpressJS and Mongoose

After reading through this post: mongoose find all not sending callback I am currently working on sending an Object along with a page in my nodejs/expressjs application, instead of just responding with JSON data. This is the route for my page: //Get lat ...

javascriptnode.jsexpressmongoosepromise