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

Building a Strong Foundation with Bootstrap's Scaffolding and Mixins

I'm a bit confused by the Bootstrap documentation's explanation of scaffolding and mixins. I tried looking up information on scaffolding in CSS, but couldn't find a clear answer. When it comes to mixins, different websites seem to have varyi ...

csstwitter-bootstrap

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

javascriptcssreactjstypescriptreact-native

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Here is the code along with my explanation and questions: I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance, Client 1: First Name - James, Address - 1234 Ma ...

javascripthtmlcssajaxapi

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

My input HTML field is disabled, but I've noticed that in some browsers (such as Chrome, Edge, Internet Explorer, and Opera), it's still possible to select and copy the text. However, in Firefox, this functionality does not work. To test this yo ...

javascripthtmlcssangular

Component fails to update when state updated using useState()

In my current project, I am facing an issue with a parent (App) and child (MUIDatatable) component setup. The child component is a datatable that requires a columns prop to define the structure of the columns, including a custom render function for one of ...

javascriptreactjsecmascript-6mui-datatable

What is the most effective method for implementing a background repeated image in Foundation 4 framework?

Currently, I am utilizing the foundation4 framework for my website. In order to achieve a repeating tiled background, I have crafted a custom CSS file and included the following code snippet: body { background: url(img/floorboardsbg.jpg) repeat; } Whi ...

htmlcsszurb-foundation

Using React.PureComponent, the list component efficiently renders each item with optimized performance

We've developed a reusable list component in ReactJS. To address performance concerns, we decided to incorporate the shouldComponentUpdate method to dictate when our list component should re-render. public shouldComponentUpdate(nextProps: TreeItemInt ...

javascriptreactjstypescript

Various static webpages can be displayed using a single URL based on the presence of a cookie

I have two similar pages, with one having an additional element to display while the other does not. These pages are static and do not involve private user data or authentication. My goal is to show one of these pages under the same URL, based on a parame ...

reactjsnext.jsreact-domreact-dom-server

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

What is causing my HTML wrapper to malfunction?

Below is the HTML code for my website: <div id="wrapper"> <div id="header"> <img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> </div> <!--- End Header ---> <div id="navbar"> <ul ...

htmlcsstagswrapper

React-tailwindcss-datepicker not displaying properly within my NextJS application

As someone new to Next.js and Tailwind, I'm currently attempting to incorporate the react-tailwindcss-datepicker into my Next.js project. However, I'm encountering issues with it not rendering properly - it seems like the styling is off. Any guid ...

reactjsnext.jstailwind-css

What is the best way to create a map in React that allows for changing the state without affecting all elements?

When working with a JSON file containing various values, one of them being "iframe" which can hold either "si" (yes) or "no" based on whether it should include an iframe. With this value (yes/no), I need (this.props.tabsiframe === 'yes') to deter ...

javascriptreactjs

Is there a way to make the hoverzoom effect only apply to a specific object instead of all objects?

I'm currently troubleshooting my code in order to implement a hover effect on Mui <cards> when a user hovers over the object. I have managed to make it work partially, but the issue is that the effect gets applied to all objects instead of just ...

javascriptcssreactjsmaterial-ui

Changes are being made to the state, but the updates are not showing up in the user interface of my photo feed

Welcome everyone, I'm currently immersed in learning react and have developed several apps using react, such as a hotel website (using react and contentful cms), an e-commerce website (using react, contentful cms, paypal), githubfinder app, todos app, ...

javascriptreactjsfirebasegoogle-cloud-firestore

Are there any methods available to customize the appearance of labels within my react-select feature?

I am currently utilizing react-select and passing an object as options. The initial element consists of a title and the second includes a subtitle. By using the getOptionLabel API, I am successfully populating the option within my select field. Below is th ...

reactjsreact-select

Creating a stand-alone NPM module for a Redux store to be used in a React application

Can the Redux Store be developed as a separate npm package for a React App and then imported into it? For instance: Assuming there is a fictional React Project named reactapp. A package called reactapp-reduxstore is created containing the Redux Store, al ...

javascriptreactjsnpmreduxmodularity

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

htmlcss

Tips for refreshing a table component after receiving a notification from a WebSocket in React JS

Currently, I am utilizing React table to load a page that shows a table with data fetched from an API. Additionally, I am listening on a web socket and whenever there is new data sent over the web socket, a console message is printed. My goal now is to a ...

javascriptreactjssocketsweb-component

The Docker build encountered an error due to confusion with MERN dependencies

Utilizing the MERN stack, this application is built with ReactJS, Node, and MongoDB. I have successfully created a docker container that runs the frontend, but unfortunately, an error keeps arising which I can't seem to pinpoint. The error message I ...

node.jsreactjsmongodbdockerdocker-compose

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Currently, I am fetching data from an API and updating TextFields with it for display. My goal is to allow users to edit the data shown in these TextFields, but I keep encountering a Uncaught TypeError: prev.fields is not iterable error whenever I attempt ...

javascriptreactjsjsonmaterial-ui