The numbers on MaterialDatePicker calendar are not centered correctly

Description: The numbers are not centered

Expected outcome: Ensure the numbers are aligned in the center

Source code: Please note that this issue was present even before any styles were added

<style name="OeamtcThemeOverlay_MaterialCalendar"
    parent="@style/Theme.MaterialComponents.Light.Dialog">
    <item name="android:colorAccent">@color/oeamtc_accent</item>
    <item name="headerLayout">@style/Oeamtc_MaterialCalendar_Header</item>
    <item name="android:colorButtonNormal">@color/oeamtc_accent</item>
    <item name="android:button">@color/oeamtc_accent</item>
    <item name="buttonBarPositiveButtonStyle">@style/ThemeMaterialCalendarButton</item>
    <item name="buttonBarNegativeButtonStyle">@style/ThemeMaterialCalendarButton</item>
    <item name="materialCalendarStyle">@style/Oeamtc_MaterialCalendar</item>
    <item name="materialButtonStyle">@style/ThemeMaterialButton</item>
</style>

<style name="Oeamtc_MaterialCalendar"
    parent="@style/Widget.MaterialComponents.MaterialCalendar">
    <item name="rangeFillColor">@color/oeamtc_accent_transparent_50</item>
    <item name="dayStyle">@style/Oeamtc_CalendarDay</item>
    <item name="dayTodayStyle">@style/Oeamtc_CalendarToday</item>
    <item name="daySelectedStyle">@style/Oeamtc_CalendarSelected</item>
</style>

<style name="ThemeMaterialCalendarButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
    <item name="android:textColor">@color/oeamtc_accent</item>
</style>

<style name="ThemeMaterialButton" parent="Widget.MaterialComponents.Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:backgroundTint">@color/oeamtc_accent</item>
</style>

<style name="Oeamtc_CalendarDay" parent="Test.Widget.MaterialComponents.MaterialCalendar.Day">
    <item name="itemTextColor">@color/black</item>
    <item name="itemFillColor">@color/transparent</item>
    <item name="itemStrokeColor">@color/white</item>
    <item name="itemStrokeWidth">0dp</item>
    <item name="android:gravity">center</item>
    <item name="itemShapeAppearance">@style/Test.ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day</item>
    <item name="itemShapeAppearanceOverlay">@style/Test.ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day</item>
</style>

<style name="Oeamtc_CalendarSelected" parent="">
    <item name="itemFillColor">@color/oeamtc_accent</item>
    <item name="itemTextColor">@color/white</item>
    <item name="itemStrokeColor">@color/oeamtc_accent</item>
    <item name="itemStrokeWidth">0dp</item>
    <item name="itemShapeAppearance">@style/Test.ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day</item>
    <item name="itemShapeAppearanceOverlay">@style/Test.ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day</item>
</style>

<style name="Oeamtc_CalendarToday" parent="">
    <item name="itemTextColor">@color/black</item>
    <item name="itemStrokeColor">@color/oeamtc_accent</item>
    <item name="itemFillColor">@color/white</item>
    <item name="itemStrokeWidth">3dp</item>
    <item name="itemShapeAppearance">@style/Test.ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day</item>
    <item name="itemShapeAppearanceOverlay">@style/Test.ShapeAppearanceOverlay.MaterialComponents.MaterialCalendar.Day</item>
</style>

Android API version: 29

Material Library version: 1.1.0

Device: Oneplus 6t and all nexus emulators

Answer №1

After investigation, I discovered the cause of this issue. It seems that in order for the app's main theme to work properly, it needs to inherit the Material theme.

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

Pooling of onChange events for slider component in Material-UI

I have been trying to manage the onChange event for a Material UI Slider by storing the value in a current array using useState. The slider gets stuck when I use the prop Name, but functions oddly and slowly if I use the id prop instead. I suspect that my ...

Issues with the responsive prop values have been detected in MUI v5 and are not functioning as expected

How can I customize my button to be small-sized on mobile view and large when the screen hits the MD breakpoint? Current button styles can be found here. I attempted using size={{ xs: "small", md: "large" }} but it did not produce the ...

Changing the color of a textarea in ReactJS using materialUI when focused

I have been experimenting with changing the default color of a TextField in material UI using CSS. After referencing the CSS injection order in material UI and some stackoverflow answers, I was able to come up with a solution. However, I also tried a diffe ...

What is the process for importing types from the `material-ui` library?

I am currently developing a react application using material-ui with typescript. I'm on the lookout for all the type definitions for the material component. Despite attempting to install @types/material-ui, I haven't had much success. Take a look ...

An issue arises when trying to import the modal popup

Hey there! I'm currently trying to implement a modal popup in react-bootstrap, but I keep running into an error that says "Props not defined". I followed the instructions from the react-bootstrap documentation, but I can't seem to figure out what ...

Problems arising in the arrangement of Material-UI Grid components

I've encountered a problem with the grid system not working as expected in my setup. In one file, I have configured it to display blog items like this: return ( <div> {blogs != null ? (<Grid container direction="r ...

Utilize the HTTP path to designate the currently active tab

Here is a sample code snippet for vertical tabs in React using the Material-UI library: import * as React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typography from '@ ...

Tips for restructuring material-ui sample showcasing theme details

I came across this example code for creating a frame around an app: Material-UI Drawer When trying to split the elements into separate components, I encountered an issue. The code works fine when copied into a new create-react-app, but once I attempted t ...

Tips on choosing a button and applying custom styles with emotion styles in MUI

Looking to apply a margin-right to my button. Currently utilizing mui 5 with Button variant='contained'. I created a custom CSS style using the styled component in mui and targeted the Box. const Wrapper = styled(Box)({ display: 'flex&ap ...

Ways to include numerous entities obtained from a JSON object

I am facing an issue with my code involving two array lists. I am attempting to add multiple objects of the same type to one array list, but when I try to retrieve them from the array list, only the most recently added object is being returned. Below is t ...

Struggling to retrieve JSON data from MYSQL database to Android App? Reach out for assistance with

I'm currently working on an Android application that interacts with a remote MYSQL database to retrieve information using JSON data. One of the challenges I'm facing is implementing a search functionality based on the userID in the app, and then ...

Navigate through the pages by simply clicking a button on my navigation bar

I currently have a NavigationBar on my app that consists of 3 tabs. I am looking for a way to switch the active tab or destination when a button is pressed. The Navigation Bar setup in the Home class: body:IndexedStack( index: currentPageIndex, ...

Utilizing props within the makeStyles keyframe animations

How can I successfully pass props to the keyframes in makeStyles when using fill value? Do I need to define initial states for the prop to be passed? The color passes correctly, but the fill value does not. ---Child component const useStyles = makeStyles ...

Creating a function to limit the display value of Material UI Autocomplete similar to Material UI Multiple Select's renderValue

Incorporating Material UI Features Utilizing the Material UI Multiple Select, you have the ability to truncate the displayed value after selection instead of wrapping onto another line by setting the renderValue to .join for the selected options, enabling ...

What is the best way to insert a logo into a MUI React navbar?

I'm trying to figure out how to add a logo to the left side of my navigation bar, but I'm having some trouble getting it to display correctly. const Navbar = ({ ...props }) => { return ( <React.Fragment> <CssBa ...

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

Strange rendering issues when using the react material-ui dialog

Exploring the Project Recently, I developed a front-end project focusing on a delivery service using React and Material UI. One interesting feature I added was a Dialog window that pops up when users click on an item, allowing them to customize it. Here i ...

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

Making an HTTP request using Kotlin in an Android application

I attempted to retrieve JSON data or something similar by using URL.readText() from java.net.url in Android Studio, but my application crashes. fun ButtonClick(view:View) { textView.text = URL("https://www.google.com/robots.txt").readText() } ...

In ReactJs, what is the best way to load a new component when a button is clicked?

In ReactJs, I have developed a main component known as MainPage using Material-UI. import React from 'react'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import CssBaseline from & ...