Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({
  dialog: {
    '& .MuiTextField-root': {
      margin: theme.spacing(1),
    }
  },
  address: {
    width:"calc(24vw + 8px)"
  },
}));

<div>
 <TextField id="contact-tel" style={{width:'10vw'}} label="联系电话" inputRef={tellRef} margin='none' />
 <TextField id="contact-company" style={{width:'14vw'}} label="公司名称" inputRef={companyRef} margin='none' />
</div>
<div>
  <TextField id="contact-address" className={classes.address} label="收件地址" inputRef={addressRef} margin='none' />
</div>

I encountered the code displayed above, but unfortunately it's not working as expected. I'm unsure what the issue is - could it be that the combination of "vw + px" is not supported?

cssreactjsmaterial-uijssinline-styles

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

Update the file path in the asset-manifest.json file

For my experiment with Azure DevOps, I decided to work on a ReactJS project that I found at https://github.com/alik0211/pokedex. The project runs smoothly when I build it locally and use npm start in the build folder. One of the files is located at http:// ...

reactjsazure

CSS: Adjusting the vertical position of text without affecting the background

I am currently working on some CSS buttons that expand in size when hovered over. I have successfully increased the text size as well, but now I am facing an issue with aligning the text a few pixels lower without affecting the background image layout. Ca ...

htmlcssimagebutton

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

htmlcssformatting

Troubleshooting Location Problem in @paypal/react-paypal-js

Having trouble integrating PayPal into my React project. Originally implemented the following code: const onCreateOrder = (data, actions) => { return actions.order.create({ intent: "CAPTURE", application_context: { shipping_pre ...

reactjspaypalpaypal-sandboxshipping-method

Connect controls to elements within a sibling component

My ImagesInput component utilizes an array called images to display the images. I have added a button for changing the images, but I am facing an issue in separating and changing the correct image. It seems to only modify the last index of each gallery a ...

javascriptreactjsredux

Troubleshooting Issues with jQuery Accordion Buttons

I have a nearly complete accordion that just needs some adjustments. HTML CODE: <footer> <div> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> ...

javascriptjqueryhtmlcss

How can I arrange data to "toggle" when clicked?

Is it possible to toggle or onClick a data sorting function from A to Z and Z to A without creating multiple methods? I already have some sorting functions in place, but I'm looking for a way to make it a toggle. I can create another function to ach ...

reactjs

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

When it comes to web frontend projects (html/css/javascript), they are often perceived as more complex to read and maintain compared to Java/C#/C/C++ projects. Is it possible to outline some optimal strategies for enhancing the readability, modularizatio ...

javascripthtmlcss

Searching through the use of autocomplete with alternative parameters

In the example below, - https://codesandbox.io/s/g5ucdj?file=/demo.tsx I am aiming to achieve a functionality where, with an array like this - const top100Films = [ { title: 'The Shawshank Redemption', year: 1994 }, { title: 'The Godfa ...

javascriptjqueryreactjsmaterial-uiautocomplete

Strategies for securing Firebase storage in Next.js without relying on Firebase authentication

Utilizing firebase storage for file uploads on my next.js page. Users complete a form and the files are uploaded to firebase storage (using a different database). I am seeking a way to restrict file uploads only within this post request. import React, { u ...

reactjsfirebasenext.jsfirebase-storagefirebase-security

What's the difference between using webpack with the --optimize-minimize flag and

Currently, I am implementing server side rendering within my React application. Within the app, there are a few images for which I have configured a loader in the webpack configuration. { test: /\.(gif|png|jpg)$/, loader: ' ...

reactjswebpackbundleproduction

Employing Jquery for restricting checkbox selection based on parent HTML elements

UPDATE I am looking to limit checkbox selection in specific sections on the same page. To prevent conflicting inputs from different sections, I believe using the label selector <label data-addon-name="xxx"> as a separator is the best appro ...

javascriptjquerycsscss-selectors

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

On my page, I want to ensure that the logo is always perfectly centered both horizontally and vertically when the page loads without any interactions. To achieve this, I used simple margin properties: margin: auto; position: absolute; top: 0; bottom: 0; ...

htmlcsscss-float

Ways to position a child element at the center of its parent container?

Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...

htmlcss

Can I exclusively utilize named exports in a NextJS project?

Heads up: This is not a repeat of the issue raised on The default export is not a React Component in page: "/" NextJS I'm specifically seeking help with named exports! I am aware that I could switch to using default exports. In my NextJS ap ...

javascriptnode.jsreactjstypescriptnext.js

Upgrading from Material UI Version 0.20 to v4.3.0: The Ultimate Transformation

I have been working on an application that was built using an older version of material UI (V0.20). Now, I am considering upgrading to the latest version of material UI and adding new modules to the application. However, I am concerned about the potentia ...

reactjsmaterial-ui

The fill layout in Next.JS Image isn't working properly

According to the Next.js image component documentation, it states: "When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit." However, in reality, the image fills the entire ...

cssreactjsnext.js

What is the best way to position my two icons next to each other in the footer of my React application?

I'm struggling with styling the footer of my react portfolio project. I specifically want to include Github and LinkedIn icons side-by-side at the bottom of the screen, but currently, they are stacked vertically in the middle of the page with too much ...

cssreactjssingle-page-applicationreact-bootstrapfooter

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss