Having trouble targeting and overriding a default class on a material ui component. Any assistance in identifying the correct target would be appreciated.
Here's my style:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& .MuiCardContent-root:last-child': {
padding: '0px'
}
}),
);
The class I am attempting to override (but my style isn't being applied): https://i.sstatic.net/lZRlK.png
Cheers
1- Start by importing { ThemeProvider } from "@material-ui/styles" in your App.js file.
2- Next, set up your custom override styles:
const customTheme = {
MuiCardContent :{
root:{
"&:last-child": {
padding: '0px'
},
}
}
}
3- Finally, wrap all of your code within the following ThemeProvider component:
<ThemeProvider theme={createMuiTheme({ ...customTheme })}>
Your routes and components here ...
</ThemeProvider>
I managed to solve the problem by following these steps: Inside a separate styles.js file:
assessmentPanelContent: {
'&.MuiCardContent-root': {
display: 'flex',
padding: '0px',
flexWrap: 'wrap',
paddingBottom: '0px'
}
}
Next, I applied my custom class to the element. The combination of my custom class and the MUI class I wanted to override successfully changed the styling of the MUI class.
After some trial and error, I finally cracked the code! My approach is similar to @Soroush's solution, with a twist - I opted to utilize custom classes on the MUI component.
This is how I tackled it:
AppTheme.js
The key lies within the h2 node of the theme object, where I incorporated my unique class .page-title. While I could have streamlined this for brevity, I've included additional properties to showcase the versatility at your disposal.
// Define device sizes and integrate them into your theme object
const allDevices = "@media (min-width:320px) and (max-width: 1024px)";
const allPhones = "@media (min-width:320px) and (max-width: 767px)";
const portraitPhones = "@media (min-width:320px) and (max-width: 480px)";
const landscapePhones = "@media (min-width:481px) and (max-width: 767px)";
const tablets = "@media (min-width:768px) and (max-width: 1024px)";
const MuiTheme = {
palette: {
primary: { main: "#E54E55" },
secondary: { main: "#26B1EF" },
},
typography: {
fontFamily: [
"Montserrat",
"Roboto",
'"Helvetica Neue"',
"Arial",
"sans-serif",
].join(","),
h1: {
fontSize: "4rem",
fontWeight: "700",
[allPhones]: {
fontSize: "3.2rem",
},
},
h2: {
fontSize: "3.5rem",
fontWeight: "700",
[allPhones]: {
fontSize: "2.75rem",
},
"&.page-title": {
marginBottom: "120px",
},
},
},
overrides: {
// Style sheet name ⚛️
MuiTypography: {
// Name of the rule
gutterBottom: {
marginBottom: "20px",
},
},
MuiTabs: {
flexContainer: {
borderBottom: "1px solid #ddd",
},
indicator: {
height: "3px",
borderRadius: "5px 5px 0 0",
},
},
MuiButton: {
sizeLarge: {
paddingTop: "15px",
paddingBottom: "15px",
},
},
},
};
export default MuiTheme;
App.js
To incorporate your custom theme in your application, simply follow these steps:
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import AppTheme from "./AppTheme";
<ThemeProvider theme={createTheme(AppTheme)}>
Route and stuff ...
</ThemeProvider>;
Recently, I have implemented a header and footer navigation on my website. The header navigation consists of 1 UL (unordered list), while the footer navigation comprises 5 ULs. My goal is to align the first child of each UL in the footer navigation with th ...
I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines). How can I pre ...
https://i.sstatic.net/bBwqi.png I came up with this idea for a button group. <div class="btngroup"> <button type="button" class="btn">Organization</button> <button type="button" class="btn">Project</button> <butto ...
Here is a visual representation of the issue I'm facing (refer to the image): Check out the Image After inspecting with Chrome, it seems like the problem is connected to --tw-ring-shadow. I attempted to use classes like ring-0 and ring-offset-0 (men ...
Seeking guidance on how to trigger a component (FetchData) - a pop-up grid with an API call, using a Button click. Inexperienced with JavaScript and working with Material UI drawer. Any insights or suggestions on what might be missing in the code? class ...
My application features a PNG image with actual dimensions of 300px X 300px. I am using a 20% scale of this image as an input image button, which displays correctly in Mozilla and Chrome browsers. However, in IE, the image appears distorted. Please refer t ...
Are there distinctions between using display:block; versus display:table;? It seems that the display type of the DOM node containing table-row and table-cell nodes is inconsequential. According to MDN, applying display:table; makes it behave like a table, ...
Exploring the possibility of using @mui/material with remix run has been an interesting journey for me. I came across this example on GitHub which served as a helpful guide in my quest. Additionally, referencing the blues stack from GitHub added further in ...
Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...
I am relatively new to html/css and have encountered a slight issue while trying to add transitions to a div element. When I hover over the div element, I would like it to smoothly transition its background-color from red to black. Here is the code snippe ...
Attempting to create a Bootstrap interface for a program. Added jQuery 1.11.0 to the <head> tag, however upon launching the web page in a browser, jQuery throws an error: Uncaught Error: Bootstrap's JavaScript requires jQuery Various attempts ...
I've been struggling to create an ion-card with two images: a main picture and a small book cover. Any ideas on how to achieve this? Note: The layout should have 2 images, one at the top and another as a small book cover. Check out this sample on St ...
Having a simple unordered list of links and using pseudo elements to generate numbers for the list, I encountered an issue with centering the number vertically within its circle background in Internet Explorer 11. Here is the HTML code: <ul> < ...
While using an "accordion" jQuery to show a contact list, I have encountered a challenge that may seem simple to someone experienced in this. Here is the code snippet: <!doctype html> <html lang="en> ... (Code continues) I am looking to add ...
Put simply, I am trying to target not only the last child in a parent div, but also the last item in a row that adjusts based on screen size. I have a row of 4 elements (divs) with borders on all but the last one using :last-child. However, when the screen ...
I have a basic list structured like this: <ul> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li>SIX</li> <li><hr&g ...
Looking to achieve a specific design effect without relying on Semantic UI? Check out the codepen link here: https://codepen.io/anon/pen/YxBOax <div class="ui container"> <div class="ui four cards stackable"> <div class="teal card"> ...
I am struggling to rearrange the div elements and the nav class is not appearing in the media query when inspected. Seeking assistance from an expert. Here is the CSS code: @media screen and (max-width:810px) and (min-width:413px) { .nav:nth-child(2) ...
I'm having trouble integrating breakpoints into my web project. I have SASS, Compass, and breakpoint all installed and I've followed the installation instructions, but it seems to be causing errors. Can someone help me troubleshoot the issue? He ...
I designed a website and used DIV CSS to call an image. .header_bottom_area { background: url(../img/HomepagePanels.jpg)no-repeat scroll center center; max-width: 100%; width: auto; height: 911px; } I would like to have the same image as shown in ...