I'm currently facing an issue with overriding the border-radius of a material-ui button using styled-components. Despite setting it to 0, it's not taking effect.
Here is the code snippet:
import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";
const StyledButton = styled(Button)`
background-color: #d29d12;
border-radius: 0;
`;
export default function App() {
return <StyledButton>Hello</StyledButton>;
}
Material-UI typically injects its styles towards the end of the <head> element, resulting in them taking precedence over styles generated by styled-components with equal CSS specificity.
To reverse this order and ensure that styled-components styles override those of Material-UI, you can utilize the StylesProvider component with the injectFirst property.
import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import { StylesProvider } from "@material-ui/core/styles";
const StyledButton = styled(Button)`
background-color: red;
border-radius: 0;
`;
export default function App() {
return (
<StylesProvider injectFirst>
<div className="App">
<StyledButton>Hello</StyledButton>
</div>
</StylesProvider>
);
}
https://codesandbox.io/s/styled-components-65qpx?fontsize=14&hidenavigation=1&theme=dark
For more information, check out these related answers:
Learn how to use the higher specificity syntax in styled-components: https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
const CustomStyledButton = styled(Button)`
&& {
color: blue;
font-weight: bold;
}
`;
const CustomButton = styled(Button)({
'&&&': {
background: crimson,
border-radius: 0
}
)}To customize the appearance of a Material-UI button, you can use className in StyledButton component:
<StyledButton className={'customStyle'}>Click Me</StyledButton>
const StyledButton = styled(Button)`
&.customStyle {
background-color: blue;
border-radius: 5px;
}
`;
If you want to change the default border-radius of a button, simply add !important to your styled component.
const CustomButton = styled(Button)`
borderRadius: 0px !important;
`;
Below is a Codepen with a menu that isn't behaving as expected. var menu = document.querySelector('.nav__list'); var burger = document.querySelector('.burger'); var doc = $(document); var l = $('.scrolly'); var panel = $ ...
I am currently working on developing a drawing board using HTML and JavaScript (Node.js on the server side). One challenge I'm facing is implementing a color picker that allows users to change the paint color dynamically. While I could hard code the c ...
When focusing on an element, I am using spatialNavigation with the following code: in index.html <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb5acf2acafbeabb6beb3f2b1bea9b6 ...
In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies i ...
I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...
As a newcomer to Javascript, I'm looking for a way to display my variable on the webpage without utilizing <span> or innerHTML. var pProductCode = $('[name=pProductCode]').val(); $('input[id*="_IP/PA_N_"]').each(function(i){ ...
I'm currently working on displaying fetched data in a child component using the context API, but encountering an error in the browser: TypeError: render is not a function The above error occurred in the component: in AppDataList (at App.j ...
I'm currently facing an issue with a custom rendered column that contains a menu button. When I click on the menu button, it opens up a menu like this: https://i.stack.imgur.com/4Lxd5.png Now let's take a look at the code snippet below: column ...
I am trying to create a menu with the following HTML structure: <ul> <li id="btnHome"><a href="#">Link One</a></li> <li id="btnAbout"><a href="#">Link Two</a></li> <li id="btnContact"> ...
Are there any tools available to validate all specified files in a pull request? I have previously used Travis CI for testing and am now searching for a similar plugin focused on validation rather than tests, such as W3C validation. ...
What is the best approach for styling third-party components like react-paginate using Material-UI elements (such as bars and buttons)? Is this achievable? ...
Is there a way to create a single source for all data that my elements can utilize but not change (one-way data-binding)? How can I achieve this without using a behavior? I attempted the following in my code: <script type="text/javascript" src="/data. ...
Is there a way to encapsulate a large number of CSS declarations so they only apply when the parent has a specified class? div { color: #ffffff; } ... a { color: #000000; } Can it be structured like this, with a parent class containing all the CSS r ...
Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...
I'm facing an issue with my navbar menu items overlapping on top of each other. What could be the reason behind this? Codepen Link: https://codepen.io/ogonzales/pen/mdeNNLB Code Snippet: <nav class="navbar navbar-expand-md navbar-light fixed-t ...
When using a contentEditable, it automatically wraps words to create a new line once the width of the editable area is reached. While this feature is useful, I am facing an issue when parsing the content afterwards as I need it to insert a <br> tag ...
Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...
Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...
I am currently working on designing a chat layout, but I am facing an issue with the multiline input box. Instead of expanding within the same view while typing in the input box, it expands downward and creates a scrollbar. You can find my sample code in t ...
Have you ever noticed a font style change in the background text when applying CSS3 animations for opacity and scale transforms? I have some text content on my page, including a "Click me" link that triggers a popup with a CSS3 animation. However, I'v ...