I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

I'm facing a challenge in Material-UI where I need to set different font sizes for TextField. While it may be simple in HTML/CSS, it's proving to be tricky in Material-UI. Can anyone help me figure out how to achieve this?

The code snippet below is what I've tried but unfortunately, it doesn't seem to work:

<TextField
    name="keyword"
    InputProps={{
        style: styles.textField
    }}
    placeholder="Type here"
/>
const styles = {
    textField: {
        fontSize: 16,
        '@media (min-width: 576px)': {
            fontSize: 20
        },
        '@media (min-width: 768px)': {
            fontSize: 22
        }
    }
};
javascriptcssreactjsmaterial-ui

Answer №1

To adjust the font size of TextField using media-query, target the main input class through the InputProps prop, and specify the input class. The classes defined in InputProps will be applied to the input element.

<TextField
  InputProps={{ classes: { input: classes.textFieldStyle} }}
  variant="outlined"
/>

Next, customize the textFieldStyle class within the makeStyles function and for incorporating @media-queries, utilize the theme.breakpoints method. Further details can be found here.

const useStyles = makeStyles((theme) => ({
    [theme.breakpoints.down("lg")]: {
        textFieldStyle: {
            color: "yellow",
            fontSize: 19
        }
    },
    [theme.breakpoints.down("md")]: {
        textFieldStyle: {
            color: "green",
            fontSize: 17
        }
    },
    [theme.breakpoints.down("sm")]: {
        textFieldStyle: {
            color: "blue",
            fontSize: 15
        }
    }
}));

View the working sandbox demo here:
https://codesandbox.io/s/textfield-with-media-query-gcoy0?fontsize=14&hidenavigation=1&theme=dark

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

Having trouble with React state not updating?

Hello, I am a beginner in the world of React and currently working on fetching an array of endpoints. My goal is to update the API's status every 15 seconds. Here is the code snippet for the array of endpoints: export const endpoints: string[] = [ " ...

reactjstypescriptaxiosstate

The issue with Jquery Ajax is that it fails to properly update MySQL values

Greetings, I am currently attempting to utilize AJAX to update data from a modal form. Although I submit the data successfully, it does not reflect the changes in the database. Here is my JavaScript code: <script> jQuery(document).ready(functio ...

javascriptphpjquerymysqlajax

Looking for assistance in reducing the vertical spacing between divs within a grid layout

Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are unif ...

javascriptcssgrid

Utilize JQuery to inject both standard HTML elements and safely rendered escaped HTML onto a webpage

After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...

javascriptjqueryhtmlhtml-escape-characters

alteration of textbox upon selection

I am currently working with the following code: $sql="SELECT * from customer_billing where sequence = '".$_GET["seq"]."' "; $rs=mysql_query($sql,$conn) or die(mysql_error()); $result=mysql_fetch_array($rs); ?> <script type= ...

phpjavascriptmysqlcomboboxtextbox

Timing feature utilized in a Web Application

My latest project involves developing a web-based testing application using CakePHP. Here's how it works: when a user starts a test, the exact start time is stored on the web server. Once the test is completed and the answers are submitted, the serve ...

javascriptajaxcakephptimer

Internet Explorer fails to execute CSS or jQuery commands

Apologies in advance for posing a question that may not be specific or beneficial to the wider community. Currently, my main focus is resolving this issue for my own peace of mind. In the process of designing a website, I implemented a social drawer featu ...

jqueryhtmlinternet-explorerdebuggingcss

Are DIV elements really impossible to click using selenium Web Driver?

Can DIV elements be clicked using selenium Web Driver? For example, I'm having trouble clicking the delete button in Gmail. https://i.stack.imgur.com/zsyio.png I've been trying to locate the element using the XPATH = //div[@aria-label='De ...

htmlcssseleniumxpathselenium-webdriver

Generating JSON on-the-fly with fluctuating keys and values in conjunction with Express JS

When I fetch an API into my Express server, the data comes in the form of JSON key-value pairs within an array. [{ "quality": "best", "url": "https://someurlhere.example/?someparameters" }, { "quality": ...

javascriptnode.jsapirestexpress

Using JQuery's ajax() method within a for loop

I'm currently working on implementing default edit mode in a Razor view. Everything seems to be functioning properly except for the filling function for the dropdown list. As part of my task, I need to populate the state dropdown list based on the cur ...

javascriptjqueryarraysajaxfor-loop

Using Reactjs to create a custom content scroller in jQuery with a Reactjs twist

I am attempting to implement the Jquery custom scrollbar plugin here in my React project. Below is a snippet of my code: import $ from "jquery"; import mCustomScrollbar from 'malihu-custom-scrollbar-plugin'; ..... componentDidMount: function() ...

javascriptjqueryreactjs

The component is receiving additional styles that were not specifically imported for it

Currently, I am working on a simple CRUD application in React JS version 18.0.0. One issue that I am facing is related to styling in one of my components, let's call it Home. Strangely, the styles from other components are also being applied to the Ho ...

reactjsreact-bootstrap

Error encountered during decryption with AES encryption: 'ERR_OSSL_EVP_WRONG_FINAL_BLOCK_LENGTH'

I am attempting to decrypt data retrieved from MongoDB using a key and initialization vector (IV) that were stored in an environment function. However, I keep encountering the following error: ERR_OSSL_EVP_WRONG_FINAL_BLOCK_LENGTH app.get("/recieve", as ...

javascriptnode.jsmongodbexpressaes

Make sure to validate for null values when extracting data using the useSelector hook

Could someone help me with checking for null while destructuring data? const { vehicles: { data: { reminderVehicles }, }, } = useSelector((state) => state); The code snippet above is throwing an error message: Attempting to ...

javascript

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Modify URL parameters using history.pushState()

Utilizing history.pushState, I am adding several parameters to the current page URL after performing an AJAX request. Now, based on user interaction on the same page, I need to update the URL once again with either the same set of parameters or additional ...

javascriptjqueryajaxurl

The Uib-Dropdown functionality is not functioning properly when placed within the body of an HTML view

After correctly installing the following dependencies: "ui-bootstrap": "0.12.2", "ngAnimate": "1.5.5", "AngularJs": "1.5.5 I encountered an issue with creating a dropdown menu in my HTML view. Despite no visible errors and successful implementati ...

javascriptangularjsangular-ui-bootstrapng-animate

What is the best way to query the ng-model table using xpath in Selenium with Java?

I'm having trouble finding a table from DOCTYPE Html using xpath or className in Selenium/java. I can't seem to locate the locator. How can I retrieve the table using selenium java? Neither of the following paths are effective. You can view a sc ...

javascriptjavaangularjsseleniumxpath

CSS challenge: designing a tab interface

I am facing a CSS challenge that has got me stumped. I'm not even sure if it's achievable. Here is what I'm trying to achieve: There are three buttons/tabs displayed like this . When a tab is clicked, a different div should be shown for eac ...

csshtmltabs

Unexpected behavior: Controller action method retrieves undefined value upon jQuery Ajax request

I'm currently working on my ASP.NET Core 3.1 project and implementing cascading dropdown functionality with jQuery. I've set it up so that changing the value of the first dropdown (Region) should automatically update the second dropdown, Location ...

javascriptc#jqueryjsonasp.net-core