Struggling to alter Material-UI theme styles

I have been working on a project using Material-UI and I am trying to change the default theme style of textTransform:"uppercase" to textTransform:"capitalize."

After checking out the documentation on custom styling, I learned that I should use inline styles or create a custom class.

Whether I add className="capitalize" (which has a text-transform property in the class) or add style={{textTransform: "capitalize"}}, I end up with the same result. The CSS property is applied to the parent div but gets overridden by a child span.

Is this the expected behavior, or am I missing something here?

cssreactjsmaterial-ui

Answer №1

To customize the text transform, you can create a custom theme and apply it:

const CustomApp = () => {
    const newTheme = { button: { textTransform: 'uppercase' } };

  return (
    <MuiThemeProvider muiTheme={getMuiTheme(newTheme) }>
      <CustomExample />
    </MuiThemeProvider>
  )
};

Check out this jsFiddle for a live example: https://jsfiddle.net/abc12345/9/

Answer №2

It would be helpful to include more information in your question. Based on my experience, this behavior does not seem intentional. Perhaps there are other props conflicting with the style props you are using.

If that is not the case, I recommend looking into the material-ui repository on GitHub. I have found solutions to many issues by examining their codebase rather than relying solely on their documentation. Hopefully, this advice proves useful to you.

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

Attitude: Defiant and Ignoring Authority

So far, no suggestions have been made, indicating that maybe I haven't properly summarized the issue; The problem arises when I absolutely position the section with the class="container" using an additional class or id specific to that <div>. I ...

javascriptjqueryhtmlcss

What is the method for configuring body attributes in CSS with AngularJS?

Setting the background image of a page using CSS: body { background: url(http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-backg ...

javascriptjqueryhtmlcssangularjs

Angular animation will be triggered when the user clicks using ng-click

In my Angular project, I'm looking to implement an animation that will enlarge the size of an image. Below is the code snippet: <div class="card"> <div class="item images-parent"> <img src="img/carryout-icon.jpg" class="left-image" ...

cssangularjs

What could be causing the "no matching overload found" error when using "useInfiniteQuery" in React?

I am encountering issues with my code and keep receiving the following error message: No overload matches this call. Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined ...

reactjstanstackreact-query

While interacting with router.query, certain characters may be omitted, however they still persist in the URL

Utilizing router.query, I fetch the necessary token for users to update their passwords. However, when I display it in my hidden field, characters such as + and / are removed. Despite attempting to use encodeURIComponent to address this issue, it does not ...

reactjsnext.js

Deleting an element from an array stored in local storage with the help of jQuery

Summary: Developing a front-end wish list feature Tech Stack: Utilizing HTML5 (localStorage), CSS, and jQuery Key Features: Ability to add and delete items dynamically with real-time count display Challenge: Issue encountered when trying to remove added ...

javascriptjquerycsshtmllocal-storage

Enhancing visual aesthetics with Vuetify on v-slot label components

I am working with Vuetify code that appears like this <v-radio-group v-model="gender" column class="radio-group-full-width"> <v-radio value="Boy"> <template v-slot:label> <v-textarea v-model="answer" v-vali ...

cssvue.jsvuetify.jsv-slot

Modifications to CSS Styles in NextJS Project Take Effect Following Deployment on Vercel

I've been troubleshooting a NextJS Project that includes an component. While everything works smoothly on my local environment, the behavior changes when deployed on Vercel Rendering. The iFrame no longer responds to changes in viewport width, ignori ...

reactjsnext.jsvercel

When the div element reaches the top of the page, it sticks to the top and is only displayed when the user

In the center of a full-screen hero section, there is a form. When it reaches the top, its position becomes fixed and additional classes are added through a script - such as shrinking its height and adding a background. What I aim to achieve is for the fo ...

javascriptjqueryhtmlcss

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

cssbuttonmouseevent

Is it possible for the NextJS Client component to only receive props after rendering props.children?

Encountering a puzzling issue that has me stumped... In my setup, I have a server side component that fetches data and then sends it over to the client component, which is all pretty standard. Here's where things get weird... When I log the data on ...

javascriptreactjsnext.jsapp-router

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

I am facing an issue with my component as it is not displaying the autosuggestions correctly. Despite having data available and passing it to the component through the suggestions prop while utilizing the Material UI AutoComplete component feature here, I ...

javascriptreactjstypescriptmaterial-ui

Vue - Display components next to sidebar

Having an issue with the vue-sidebar-menu. The sidebar is appearing over the components instead of beside them. Here is a screenshot of the problem: https://i.sstatic.net/cVgI6.jpg <template> <div id="app"> <sidebar-menu :menu="menu" ...

javascripthtmlcssvue.js

Is it possible to customize the borders of boxes in Google Charts Treemap?

Although this may seem like a minor issue, I can't find any information in the documentation. I'm currently using Google Charts treemap for monitoring a specific project. The problem I'm facing is that when all the parent level rectangles ar ...

cssgoogle-visualizationtreemap

I'm encountering an issue where the variable "user" cannot be found. This problem is arising while working with Firebase Auth alongside the most recent SDK version of Expo (SDK 42)

import { StyleSheet, Text, View } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from " ...

reactjsfirebasereact-nativeexporeact-navigation

Error occurred during railway deployment, causing the build to fail

Currently, I am attempting to deploy a basic notes app on Railway as part of a course challenge. However, every time I try to deploy it, I encounter the following error message: #13 ERROR: executor failed running [/bin/bash -ol pipefail -c npm run build]: ...

reactjsexpressdeploymentbuild

react component failing to update after state change

The layout is not displaying correctly when the state of page changes. Whenever I click on a category link, it verifies if the link exists in the category list. Then, it should update the page state to 'category'. Similarly, clicking on a recipe ...

javascriptreactjs

What is the best way to assign an image to a div using JavaScript or jQuery?

I'm attempting to create a notification box similar to this one: https://i.sstatic.net/HIJPJ.png As shown, there is a .gif image positioned at the top that will be hidden once the content loads. Now, I want to insert the following image into a <d ...

javascriptjqueryhtmlcss

The mp4 video on the website will only load if the Chrome developer tools are activated

Whenever I try to play the video set as the background of the div, it only starts playing if I refresh the page with Chrome dev tools open. HTML: <div id="videoDiv"> <div id="videoBlock"> <img src="" id="vidSub"> <video preload="prel ...

htmlcssmp4

Effective ways of making mat-toolbar react to Angular modifications

For a while now, I've been struggling to create a simple header for the homepage of my web app using mat-toolbar. However, no matter what I try, I just can't seem to get it to display the way I want. Here's the code I've been working wi ...

htmlcssangular