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

Tips for customizing the appearance of material-ui SelectField

Currently, I am utilizing material-ui alongside react with the version "material-ui": "^0.19.2". I am facing an issue while attempting to embed a SelectField inside a table. Although the functionality is working smoothly, there are two unexpected behaviors ...

cssreactjsmaterial-ui

Displaying a single item per click using jQuery

Hey there, I have a small issue with some HTML divs and show/hide functionality. I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once. Any suggestions on how to fix this? Check ou ...

jquerycss

Using JavaScript in Node, you can pass an object by throwing a new Error

How can I properly throw an error in my node application and access the properties of the error object? Here is my current code: throw new Error({ status: 400, error: 'Email already exists' }); However, when I do this, I get the following outpu ...

javascriptnode.jsreactjsreact-nativeexpress

Formulate a multi-line string using a collection in React's JavaScript framework

I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...

javascripthtmlreactjstypescript

Split an array of simple data types in JavaScript into separate sections

Is there a way to divide an unordered array of primitive types into specific segments like this: var array = [102,103,104,201,203,204,303,301,302,405,406,408,101]; => newArray = [[101,102,103,104],[201,203,204],[303,301,302],[405,406,408]] The divisio ...

javascriptarrayssortinglodash

Transforming a JavaScript Date object to a Java LocalDateTime

In my current project, I am facing a challenge while attempting to pass UTC time from a JavaScript front end to a Java backend. My initial approach involved utilizing the Date.toISOString() method and sending the generated object to the Java backend. Howev ...

javascriptjavatypescriptdatetimedatetime-format

What is the best way to bypass TS1192 when incorporating @types/cleave.js into my Angular application?

Using cleave.js (^1.5.2) in my Angular 6 application, along with the @types/cleave.js package (^1.4.0), I encountered a strange issue. When I run ng build to compile the application, it fails and shows the following errors: ERROR in src/app/app.component. ...

javascriptangulartypescriptdefinitelytypedcleave

results vary when using both a while loop and callback

I'm having an issue with my while loop when filtering data from mongodb. Even though I should be getting three entries logged to the console, only one entry is making it to the callback function. Can anyone explain why this is happening? while(i--) { ...

javascriptnode.jsexpresswhile-loop

Ways to broaden React categories for embracing html attributes as props?

When designing a component that accepts both custom props and HTML attribute props, what is the best approach for creating the interface? The ideal interface should also accommodate React-specific HTML props, such as using className instead of class. Here ...

reactjstypescript

Issue with fuse-box: unable to import ReactDOM

Recently, I decided to switch from webpack to fuse-box for my side project. Everything is compiling without any issues, but when I try to load it, an error pops up: I downloaded a React demo code and it works fine. Additionally, there are no problems wit ...

javascriptreactjsreact-domfusebox

encountering difficulties while trying to install packages using npm

I encountered some issues while setting up a react-app and attempted to resolve them by deleting /node-modules and reinstalling, but the problems persist. I'm using Ubuntu as my operating system. Can someone assist me with this? Below is the error log ...

reactjsubuntunpmreact-reduxnpm-install

Build a unique array of identifiers extracted from an object

I am seeking advice on how to extract an array of IDs values by iterating through an object in React JS. const initialState = useMemo(()=> { return dataTable.filter(result => favorites.some(favorite => result.id === favorite.id)) },[ ...

javascriptreactjstypescriptantd

Accessing properties of objects using specific keys

In my coffeescript code, I am attempting to retrieve the keys from an object where the key matches a specific value. However, in addition to the object's own properties, I am also getting function properties in my result. This issue is causing an err ...

javascriptangularjscoffeescriptangularjs-ng-repeat

The number I clicked is not displaying on the screen in my React project

When attempting to display the clicked number on the screen, it is not appearing. However, it does show in the console. I am unsure of how to fix this issue; the number should be displayed on the screen next to "Number:" import { render } from "@testing-li ...

reactjsreact-hooksfrontendrendering

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

Looking for a seamless solution to render rounded corners on browsers that do not support CSS3 without the delay typically seen with JQuery plugins. The use of .htc files with www.css3pie.com seems like the best option so far, but there is still a delay c ...

jqueryinternet-explorercss

Splitting code efficiently using TypeScript and Webpack

Exploring the potential of webpack's code splitting feature to create separate bundles for my TypeScript app has been a priority. After scouring the web for solutions, I stumbled upon a possible lead here: https://github.com/TypeStrong/ts-loader/blob/ ...

javascripttypescriptwebpackcode-splittingts-loader

Exploring the function.caller in Node.js

Currently, I have a task that relies on function.caller to verify the authorization of a caller. After reviewing this webpage, it seems that caller is compatible with all major browsers and my unit tests are successful: https://developer.mozilla.org/en-U ...

javascriptnode.js

Sending data using jQuery when a button is clicked

Is there a way to display the text from a text box when a button is clicked? Here's what I have been attempting: <script type="text/javascript> $(function() { $('#button').click(function(){ $.ajax({ type: "PO ...

javascriptphpjqueryajax

What is the method for identifying which individual element is responsible for activating an event listener?

While working on a color picker project in JavaScript for practice, I encountered an issue. I needed the #screen element to display the selected color when clicked. How can I determine which color has been clicked and pass its value to the function so that ...

javascripthtmlcss

The use of set.has in filtering does not produce the desired outcome

I am attempting to use Set.has to filter an array in the following way: const input = [ { nick: 'Some name', x: 19, y: 24, grp: 4, id: '19340' }, { nick: 'Some name', x: 20, y: 27, grp: 11, id: '19343' }, { ...

javascriptarraysfilter