Setting the default styling for unordered lists in Material-UI React is a breeze with these simple steps

Currently, I am attempting to recreate a basic blog using markdown with Next.js and Material-UI. However, it appears that something is stripping away the default styles from unordered lists.

The list items (HTML elements) have been set with list-style: none; and lack padding. On the other hand, ordered lists display normally with their default styling intact.

This is how it is displayed in the example provided in the documentation:

https://i.sstatic.net/I9n2R.png

Despite following the same content and markdown handling code, this is what I end up with:

https://i.sstatic.net/JfNq1.png

The issue remains whether I use markdown content or directly include ul, ol, and li elements in JSX.

Even in the sample code provided in the documentation where markdown is processed and converted into React components, there doesn't seem to be any alteration to the styling.

cssreactjsmaterial-uimarkdownhtml-lists

Answer №1

My mistake, I found this code snippet in one of my components:

<GlobalStyles styles={{ ul: { margin: 0, padding: 0, listStyle: 'none' } }} />

This code was unintentionally overriding the default styling.

After realizing it was from an old component that wasn't needed anymore, I removed it.

Lesson learned: modifying global styles without caution can lead to issues.

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

Tips for implementing Material-table in react 18

Hey there! I've been on the lookout for a React table library that supports features such as CRUD rows, exporting, validation, and more. After some searching, I stumbled upon the Material-table package. The downside is that material-table isn't c ...

reactjs

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...

javascripthtmljquerycss

How can you insert text onto a page with restricted space?

As I work on my web page, I find myself restricted by a character limit of 10,000. This limitation is proving to be quite challenging for me. The tabs on the page I am editing are divided with div ID, and all my writing already takes up 80% of the charact ...

htmlcssembed

Can you choose and generate identical values using react-select?

I am working on implementing a multi Creatable feature where users can select a preset value or create a new value during the same interaction. To illustrate, here is my current render: import CreatableSelect from 'react-select/creatable'; functi ...

javascriptreactjsreact-select

What is the process for creating objects in two different Mongodb collections?

I am currently working on a project related to note-taking applications. Prior to this, my knowledge was limited to handling a single collection in MongoDB. However, in this application, I have enabled users to add notes and assign them to preferred catego ...

reactjsnode.jsmongodbexpressmongoose

Is there a way to access fields from an associated model within React components?

Is there a way to access fields from an associated model in React components within Rails? I have a listing model that I'm iterating through in a React component and retrieving all the fields for each record, including the ID of the associated model. ...

javascriptruby-on-railsreactjsreact-reduxreact-rails

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

Error occurs when attempting to call a function with a reference value in ReactJS

I have been learning ReactJS and I created a simple program that displays records in a list and allows users to delete each record by clicking its delete button. The code consists of three components - Store calls View component to display records, and Vie ...

reactjs

The issue with Icons not displaying in MaterialTable when using the Fuse template

I'm currently working on a project that utilizes MaterialTable from material-ui, but I'm facing an issue where the icons are not being displayed. Within my page, I have imported the following: import MaterialTable, { Column } from 'material ...

reactjsmaterial-uifusematerial-table

Enhance your React Native app: Utilizing dynamic string variables with react-native-google-places-autocomplete query

I have encountered an issue while attempting to pass a dynamic country code to restrict search results. Here is the code in question: let loc = 'de' <GooglePlacesAutocomplete placeholder="Search" autoFocus={true} onPress ...

javascriptreactjsreact-nativegoogle-places-api

What is the best way to transfer the "user" object from TopBar.js to App.js in my project?

In my project, TopBar.js functions as an AppBar component responsible for handling user authentication. When a user logs in, I receive an object called "user". My goal is to export this "user" object to App.js. If I am successful in exporting it to App.js ...

javascriptreactjsfirebasefirebase-realtime-databasefirebase-authentication

What approach do you recommend for creating unique CSS or SCSS styles for the same component?

Consider a scenario where you have a complicated component like a dropdown menu and you want to apply custom styles to it when using it in different contexts. This customization includes not only changing colors but also adjusting spacing and adding icons. ...

javascriptcssdesign-patternssass

Transforming color images into black and white using JavaScript

     I have implemented this code to convert colored images to grayscale. function applyGrayscaleEffect() {         var imageData = contextSrc.getImageData(0, 0, width, height);         var data = imageData.data;         var p1 = 0.99;   ...

javascripthtmlcssslider

Having trouble dealing with a npm error during the installation of react navigation. Any idea on how to fix this issue?

I encountered an issue with npm while trying to install react-navigation. Is anyone familiar with this problem? ERR! code 1 npm ERR! Command failed: /usr/bin/git clone -q git://github.com/react-navigation/react-native-tab-view.git /Users/nakul/.npm/_cac ...

node.jsreactjsreact-nativenpmreact-navigation

Steps to customize a CSS file within node_modules

Is there a way to make changes to a CSS file in the "node_modules" dependency without them being overwritten when I run npm install? I want to keep the modifications I've made to the node module files. ...

javascriptcssnode.jsnpmnode-modules

Utilize UI Kit to incorporate fluid margins dynamically

How can I dynamically add internal margins between cards in a responsive layout? The following code ensures responsiveness: Large Screens display 4 Cards. Medium Screens display 3 Cards. Small Screens display 2 Cards. Micro Screens display 1 Card. &l ...

htmlcssflexboxgetuikit

Using the `document.querySelector` method to target the `.mat-progress-bar-fill::after` element

Is there a way to dynamically adjust the fill value of an Angular Material Progress Bar? In CSS, I can achieve this with: ::ng-deep .mat-progress-bar-fill::after { background-color: red; } However, since the value needs to be dynamic, I am unable to do ...

cssangularangular-material

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the f ...

cssfootersticky-footer

Error message: "Do not place <Link> element without having a parent <Router>"

As I attempt to navigate between screens using BottomNavigationAction from Material UI, I encounter the error message You should not use <Link> outside a <Router> Here is my Tab.js: import React from 'react'; import { Link } from &a ...

reactjsreact-reduxmaterial-ui