Utilizing MaterialUI and CSS to craft this stunning box

Looking to create a new MaterialUI component similar to this one: original box

Struggling with implementing it using the card component, but so far it looks like:

poorly designed box

Here's my custom styling using makeStyles:

  const useStyles = makeStyles(() => ({
    cardHeader: {
      color: "white",
      borderRadius: "0"
    },
    cardDescription: {
      display: "flex",
      justifyContent: "center",
      alignItems: "baseline",
      backgroundColor: "#315059",
      color: "cyan"
    },
  }));

  const classes = useStyles();

And here's the code for my card component:

<Card style={{borderRadius: "0"}}>
          <CardHeader
            title="AVERAGE SPEED"
            titleTypographyProps={{ align: "center" }}
            subheaderTypographyProps={{ align: "center" }}
            className={classes.cardHeader}
            style={{backgroundColor:"#f92f3b"}}
          />
          <CardContent style={{backgroundColor:"#f92f3b"}}>
            <div className={classes.cardDescription}>
              <Typography component="h2" variant="h3" color="cyan" >
                262
              </Typography>
              <Typography variant="h6" color="white">
                KM/H
              </Typography>
            </div>
          </CardContent>
        </Card>
cssreactjsmaterial-ui

Answer №1

It seems that the provided code for the design box and screenshot doesn't quite align. It's possible that other project styles are conflicting with it. Nevertheless, I have made some adjustments to make it closely resemble the required screenshot.

Note:- The fonts and card dimensions may vary based on the specific use case.

import { Card, CardContent, CardHeader, makeStyles, Typography } from "@material-ui/core";
import React from "react";
import "./styles.css";

export default function App() {
  const classes = useStyles();
  return (
    <div>
      <Card style={{borderRadius: "0",width:'380px'}}>
          <CardHeader
            title="VELOCIDAD MEDIA"
            titleTypographyProps={{ align: "center" }}
            subheaderTypographyProps={{ align: "center" }}
            className={classes.cardHeader}
            style={{backgroundColor:"#f92f3b"}}
          />
          <CardContent style={{backgroundColor:"#f92f3b",padding:'8px'}}>
            <div className={classes.cardDescription}>
              <Typography component="h2" variant="h3" color="cyan" >
                262
              </Typography>
              <Typography variant="h6" style={{marginLeft:'15px', color:'#fff'}} color="white">
                KM/H
              </Typography>
            </div>
          </CardContent>
        </Card>
    </div>
  );
}


const useStyles = makeStyles(() => ({
  cardHeader: {
    color: "white",
    borderRadius: "0",
  },
  cardDescription: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#315059",
    color: "cyan",
    height:'150px'
  },
}));

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

The error encountered in the Node crud app states that the function console.log is not recognized as a

I am attempting to develop a CRUD application, however, I keep encountering an error message that states "TypeError: console.log is not a function" at Query. (C:\Users\Luis Hernandez\Desktop\gaming-crud\server\app.js:30:25) h ...

javascriptnode.jsreactjs

Tips for managing a date picker with JavaScript using the Selenium WebDriver

I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...

javascriptpythoncssselenium

Ensuring Proper Highlighting for HTML Select Options

I am working on a project involving an HTML Drop-down menu. Check out the code I have so far: http://jsfiddle.net/dineshk/u47xjqLv/ HTML Code <select> <option class="first" style="display:none;">HH</option> <option class= ...

htmlcss

Enhance the appearance using material UI design elements

Is there a way to enhance styles in ReactJS? I tried extending the style, but it didn't work. cellItem:{ color: "black", fontWeight: "bold", [theme.breakpoints.down("xs")]: { fontSize: "0.8em" }, }, tableCellItem: { extend:"cel ...

reactjsmaterial-uijss

The young one emerges within the SecurePath component temporarily

Setting up authorization in React has been a priority for me. Ensuring that users cannot access unauthorized pages within the application is crucial. To achieve this, I have created a custom component as shown below. import { ReactNode } from "react&q ...

reactjstypescriptreact-routerreact-router-domredux-toolkit

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

cssreactjsmaterial-ui

Ways to eliminate additional whitespace in CSS Grid styling techniques

Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap ...

cssreactjsmaterial-ui

Ways to trigger a component to render again from a separate component

export default function Filters() { const [data, setData] = useState(Data.items) const filterItem = (type) => { const newData = Data.items.filter((newItem) => { return newItem.vehicleType === type }) setData(newData) } re ...

reactjsnext.js

Differentiating page URLs in NextJS based on language

I'm currently developing a website with multiple languages and I would like the page URLs to vary based on the language. For instance, www.website.com/anasayfa and www.website.com/home lead to the same page but have different URLs. I've been us ...

reactjsnext.js

Inquiry parameter for RTK Query

I need help with sending a request using the following URL structure: . However, my current code is generating requests in this format: . I am unsure of how to set the query parameters correctly. Can someone guide me on fixing this issue? import { creat ...

reactjsreduxrtk-query

What is the process for implementing custom color props with Material-UI v5 in a React TypeScript project?

Looking to enhance the MUI Button component by adding custom color props values? I tried following a guide at , but encountered errors when trying to implement it in a custom component. The custom properties created in createPalette.d.ts did not work as ex ...

reactjstypescriptmaterial-ui

Having trouble adding or upgrading packages for your React project?

Struggling with my React project as every time I try to update or install new packages, my computer starts making a lot of noise. It seems to be related to the versions of react-dom and react-router-dom, but I'm unsure how to resolve this without caus ...

node.jsreactjsnpminstallation

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

jquerycsstooltip

What could be causing this hydrating error to pop up in NextJS when I refresh the page?

Upon refreshing my page, I encountered the following errors: The text content does not match the server-rendered HTML. Hydration failed because the initial UI does not align with what was rendered on the server. An error occurred while hydrating, causing ...

reactjsnext.jssanity

Display JSX or an Icon within the Monaco Editor Section in a React Application

Currently developing a platform to display code snippets as posts. I am looking to enable creators to provide line-by-line explanations for the code they upload within each snippet. These explanations would appear in a tooltip or modal triggered by clickin ...

reactjsiconsjsxmonaco-editorreact-monaco-editor

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

I have been working on a travel website and incorporated a bootstrap tab feature. In the first tab, I have some content, while in the second tab, I've added a full calendar with JavaScript. Everything seems to be functioning correctly when the full ca ...

javascriptjqueryhtmlcssfullcalendar

Conceal the Angular Bootstrap modal instead of shutting it down

I am utilizing Angular Bootstrap Modal to launch multiple modals, including a video player. http://angular-ui.github.io/bootstrap/#/modal My goal is to maintain the video's current position even when the modal is closed. This way, when I reopen the ...

javascriptcssangularjstwitter-bootstrap

How can you dynamically change the value of a React datetime slider picker using code?

I can't figure out how to programmatically update the value of the React datetime slider picker, especially when I click on a button. The rendering code for the widget looks like this: <RDSPwidget enableSecond={true} /> This is how my ...

javascriptreactjsdatetime

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

htmlcss

Error encountered when mapping through images in Next.js with TypeScript due to a missing mandatory 'src' property

Issue: I am encountering an issue where the string entries from an array of objects are displayed correctly, but the images in the Image Component do not load dynamically in the src. The images are imported in the constants.js file and exported via the &a ...

reactjsimagenext.js