Center-align the content in Material UI Typography by using the variant attribute for the caption

I'm struggling to center the content of my Typography elements with default and caption variants using the align="center" property. The alignment doesn't seem to be working properly, especially for the variant as caption. Here is a snippet of the code:

  render() {
    return (
      <div>
        <Typography align="center">Centered text</Typography>
        <Typography color="textSecondary" variant="caption" align="center">A Caption!</Typography>
      </div>
    );
  }

To help demonstrate the issue, I've set up a sample on StackBlitz. Can anyone provide assistance in solving this problem?

javascriptcssreactjsmaterial-uitypography

Answer №1

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function CenteredText() {
  return (
    <div>
      <Typography align="center">Centered text here</Typography>
      <Typography
        display="block"
        color="textSecondary"
        variant="caption"
        align="center"
      >
        A unique caption!
      </Typography>
    </div>
  );
}

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

During the development of my project using the MERN Stack, I faced a challenge that needed to be

I recently ran into an issue while working on my MERN Stack project. The React app is running on port 3000 and the Express API on port 5000. The problem arose when I tried to add OAuth functionality using Redux, as I started getting an error message that ...

javascriptreactjsexpressoauthcors

Unable to locate the reference to 'Handlebars' in the code

I am currently attempting to implement handlebars in Typescript, but I encountered an error. /// <reference path="../../../jquery.d.ts" /> /// <reference path="../../../require.d.ts" /> My issue lies in referencing the handlebars definition f ...

javascripttypescripthandlebars.js

Unable to serve as a JSX component. The return type 'void' is not a permissible JSX element

After creating a component called 'FormField' to streamline the code and eliminate repetition, I encountered this error message: 'FormField' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element. ...

node.jsreactjsformsform-fields

Watching a video play within a slider and transitioning seamlessly to an image once the video ends

I am currently facing an issue with a video playing inside a HeroCarousel slider. Before the slider, there is an image and after the slider, there is another image. This is my code: <div data-time="8000" data-prev-src="/media/splash/slider-left.png" ...

javascriptjqueryhtmlvideo

Images are not being retained in JSPDF when using Firebase Storage

I have encountered an issue while building a PDF in JSPDF with React. I am trying to add an image (a map) to this PDF using takescreenshot() from the ArcGIS API. The problem arises when I upload the generated PDF to Firebase storage and then automate an em ...

reactjsfirebasefirebase-storagejspdf

Ways to Ensure a Property of an Object Remains Synced with Another

I'm dealing with the following Object structure: { a: "123" b: "$a" } In this setup, b should always be equal to the value of a. Any suggestions on how I can achieve this using JavaScript? ...

javascript

Why is there space between two divs if there are no `margin`, `padding`, or `border` properties set?

Using vue.js, I created a page called index.vue which includes the components header.vue and home.vue: The code for index.vue: <template> <div class="index"> <i-header></i-header> <router-view></router-view> ...

cssvue.js

Unequal height among each div's elements

I'm struggling with creating a footer divided into 3 blocks, but they do not have equal heights, causing the border-right line to appear uneven. Here is a screenshot of the issue: Not equal height of elements Any suggestions on how to fix this? Is m ...

htmlcssblockfooter

Implementing infinite scrolling asynchronously to dynamically load and present data in a table view within a React application

I am a novice developer working on my first React application. I have explored several React plugins for implementing a data grid with infinite scroll functionality, but I haven't found the right solution yet. Here is what I currently have and what I ...

reactjsdatagridinfinite-scroll

Execute a setInterval operation, pause it for a duration of 3 seconds, and then resume its execution

A setInterval function is looping through some div classes, and if it encounters a div with a specific class, it should pause for 3 seconds before resuming. I am using the following code to clear the interval: clearInterval(myInterval); However, I nee ...

javascriptjquerysetinterval

Testing asynchronous code in React components using Unit Tests and indexedDB

I am currently working on creating unit tests for a React component that is structured in the following way: A database handle is passed to the component The component also receives data as props (which may change) - this data could potentially come from ...

reactjsjestjs

Increasing an ID number automatically using Javascript

I'm currently working on a functionality where a unique number is automatically generated whenever a new record is created. For instance, if I were to click "Create record" on a webpage, the number would auto-fill in the record ID field. Subsequently, ...

javascripthtmltypescriptangular-material

The HTML table seems to be inexplicably replicating defaultValue values

I'm encountering an issue where, when I use JavaScript to add a new table data cell (td), it ends up copying the defaultValue and innerText of the previous td in the new cell. This is confusing to me because I am simply adding a new HTML element that ...

javascripthtmlreactjs

Eliminate the JSON object within jqGrid's posted data

The web page I'm working on features Filters with two buttons that load data for jqGrid when clicked. Clicking 'Filter' generates a postData json object and sends it to the server, which is working perfectly. However, I'm facing an is ...

javascriptjsonajaxjqgrid

Arranging nested arrays

There is a nested list provided with the following markup (which cannot be altered currently). My goal is to sort this list and all nested lists by the title of the 'a' tag. The initial div (not nested in 'li') should be used for sortin ...

javascriptjquerysorting

Incorrect posture during the movements

Utilizing Jquery Drag and Drop, I have implemented two swap-able divs. However, during the animation process of swapping the divs, their positions are not properly maintained. The actual swapping of the divs works correctly, but there is an issue with the ...

javascriptjqueryhtmlanimationjquery-animate

Error: The function to create deep copies of objects is not working properly due to TypeError: Object(...) is not a

Encountering a TypeError: Object(...) is not a function in the following situation: To set up the state of a component with a specific Article (to be fetched from the backend in componentDidMount), I am implementing this approach // ArticlePage.tsx import ...

reactjstypescriptreact-typescript

Step-by-step guide on accessing and displaying a disc file within a webix application

I am a beginner in webix development and struggling to find documentation or help for my current issue. Within my webix application, I am trying to create a button (let's call it 'View Report') that when clicked will open a file from my loc ...

javascriptjqueryhtmlwebix

There was a dependency resolution error encountered when resolving the following: [email protected] 12:15:56 AM: npm ERR! Discovered: [email protected] . The Netlify deploy log is provided below for reference

5:27:42 PM: Installing npm packages using npm version 8.19.3 5:27:44 PM: npm ERR! code ERESOLVE 5:27:44 PM: npm ERR! ERESOLVE could not resolve 5:27:44 PM: npm ERR! 5:27:44 PM: npm ERR! While resolving: [email protected] 5:27:44 PM: npm ERR! Foun ...

javascriptreactjsnpmnpm-installreact-otp-input

Exploring AugularJS with nested JSON data structures and dynamic views

Just getting started with Ionic and decided to work on a book library app for internal use. Here's a link to my Plunker. All my book data is stored in a JSON file in services.js. It's a nested JSON structure with different book categories, each ...

javascriptangularjsjsonionic-framework