Attempting to set a custom color for a Button using createMuiTheme and ThemeProvider has been successful with the primary and secondary palettes. However, when trying to utilize an alternate color such as "info", it does not seem to work as expected:
https://i.stack.imgur.com/QtNgA.png
Does anyone have insights on what could be going wrong or any alternative approaches to achieve this?
The palette object only recognizes primary and secondary attributes.
To customize a variant to your liking, follow these steps. It's important to note that the ability to create custom variants is only available in the latest version (v5 and above) of material-UI.
import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
components: {
MuiButton: {
variants: [
{
props: { variant: 'twitter' },
style: {
backgroundColor: '#00acee',
color: '#FFFFFF',
"&:hover": {
backgroundColor: "#007cad",
},
},
},
{
props: { variant: 'facebook' },
style: {
backgroundColor: '#3b5998',
color: '#FFFFFF',
"&:hover": {
backgroundColor: "#314c85",
},
},
},
],
},
},
});
export default theme
Implementing the Custom Variants in UI Components:
<Grid item>
<Button variant="facebook" startIcon={<FacebookIcon />}>Facebook</Button>
</Grid>
<Grid item>
<Button variant="twitter" startIcon={<TwitterIcon />}>Twitter</Button>
</Grid>
For further assistance, check out the following links:
https://github.com/mui-org/material-ui/issues/15573 https://github.com/mui-org/material-ui/issues/15573#issuecomment-724114107
I am looking to display two components (AppComponent and UserComponent) without constantly displaying AppComponent. Here's how my code is structured: app.routing.module.ts const routes: Routes = [ { path: '', component: AppComponent ...
Is it safe to do the following in React: function Parent() { const myRef = useRef([1, 2, 3]); console.log("parent: " + myRef.current); return <Child myList={myRef.current} />; } function Child({ myList }) { const [currInt, setCurrInt] = useS ...
Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...
Hey there! I'm looking for some help with transforming this jQuery effect. Instead of having fixed sized images, I want to set the size in percentage (width:100%; height:auto) so they can be responsive. Any creative ideas or suggestions? <scri ...
I'm currently grappling with understanding Material UI's grid system and implementing it in React.js, and I find it a bit perplexing. My goal is to center the spinner loader and text irrespective of viewport size. While I can manage to place the ...
Check out this piece of code: var gulp = require('gulp'), fs = require('fs'); gulp.task('taskOne', function() { return gulp.src('folder1/file1.js') .pipe(gulp.dest('folder2')); }); gulp.t ...
I've been using mithril.js to communicate with my node back-end. I followed the documentation and added an AJAX request, but there seems to be limited information available on mithril. Encountered Error: mithril.js:2130 POST http://localhost:3000/a ...
Having trouble compiling TypeScript to JavaScript when using decorators. A persistent error message I encounter is: app.ts:11:7 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the ' ...
Struggling with a coding issue for hours now and in need of some assistance. The challenge at hand involves creating an object named Rank. Rank is expected to make DB calls in mongodb to retrieve data needed to populate a matrix, followed by executing nes ...
After extensive research, I discovered that the most effective approach involves using a clever workaround to capture every tick and untick on a dynamic input row with multiple checkbox arrays. However, none of the solutions provided a viable method. I th ...
When dealing with primitive datatypes in JavaScript, passing by reference doesn't work. One common workaround is to wrap them in an object. However, what happens if a variable starts as null and then gets reassigned as an Object before being passed to ...
I'm struggling to set up TailwindCSS 2.0 with the create-react-app --template typescript configuration and encountering errors. Even after following the instructions on the official TailwindCSS website for React at https://tailwindcss.com/docs/guides/ ...
I have defined the following routes in my project: $stateProvider .state('access', { abstract: true, url: '/access', templateUrl: 'login.html' }) .state('access.signin', { ...
Need help with setting the background color of a Material-UI Drawer. I tried using the following code but it didn't work: const styles = { paper: { background: "blue" } } After defining the styles, I passed them to the Drawer component like ...
Receiving an object from the client side in this format: var condition={"bedrooms":"1,2,3,4","Inhibition":"1,6","possession":"3","id":"8",toilets:"1,2",...,} The object must have the same keys and only be a single object, but its length can vary (1/2 ...
I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...
I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...
Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...
I have encountered an issue while developing an angular application. Upon running ng serve, I am receiving the following error in ERROR in ./node_modules/@angular/http/src/backends/xhr_backend.js 204:40-68: "export 'platform_browser_private' w ...
Currently, I am utilizing React along with next.js and Google Cloud functions to host my application. Additionally, I am integrating firebase into the mix. One pressing issue I am facing pertains to efficiently configuring the staging and production enviro ...