I want to change the color of button in react using material ui-CodePudding

using following version

npm view react version # 17.0.2

My code is as:

import React from 'react';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Image from "material-ui-image";
import Typography from '@mui/material/Typography';
import Rating from '@mui/material/Rating';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { createTheme } from '@mui/material/styles';
import { blue, yellow, red } from '@mui/material/colors';

import {Link} from "react-router-dom";

const theme = createTheme({
    palette: {
        primary: blue,
        secondary: yellow,
    },
});

const TourCard = () => {
    return (
        <Grid item xs={3}>
            <Paper elevation={4}>
                <Image src="color-separations_3.png"
                       loading="lazy"
                       className="img"
                       alt=""
                       cover
                       disableTransition
                       sx="2"/>
                <Grid container spacing={0} mb={2}>
                    <Typography align="left" variant="h4" component="h4" ml={1} mr={2}>
                        TUKAcad
                    </Typography>
                    <Box mt={2}>
                        <Rating size="small" value={4} mt={4} precision={0.5}> </Rating>
                    </Box>
                </Grid>
                <Typography paragraph={true} variant="subtitle1" ml={2}>
                    Pattern-making software with advanced functionality to empower accurate pattern building, bespoke
                    grade rules, and marker nesting for every style conceived.
                </Typography>
                <Box ml={2} >
                    <Button variant="contained"   color={theme.palette.secondary}  target={"_blank"} href="www.tukaweb.com">
                        {/*<Link to="/yourRoute">Know more</Link>*/}Know More
                    </Button>
                </Box>
            </Paper>
        </Grid>
    );
}

export default TourCard;

I am new to react, I want to change the colour of the button to yellow any idea how to implement it, thanks in advance .

CodePudding user response：

You have to import and wrap your component in a ThemeProvider and then pass in a string (i.e. "secondary," "primary") to the Button's color attribute.

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: blue,
    secondary: yellow
  }
});

const TourCard = () => {
    return (
  <ThemeProvider theme={theme}>
          <Grid item xs={3}>
              <Paper elevation={4}>
                  {...}
                  <Box ml={2} >
                      <Button variant="contained"   color="secondary"  target={"_blank"} href="www.tukaweb.com">
                          {/*<Link to="/yourRoute">Know more</Link>*/}Know More
                      </Button>
                  </Box>
              </Paper>
          </Grid>
  </ThemeProvider>
    );
}

CodePudding user response：

Here's an easy way. Just apply a style via className and set css property background as so.

It's always nice to use primary and secondary via ThemeProvider if you plan to apply the same yellow/color globally but for one off color use the approach I followed.

const useStyles = makeStyles({
  btn: {
    // you'll probably want the hex color code below
    background: 'yellow',
    // ... other css properties
  },
});
 const TourCard = () => {
  const classes = useStyles();
    return (
        <Grid item xs={3}>
            <Paper elevation={4}>
                <Image src="color-separations_3.png"
                       loading="lazy"
                       className="img"
                       alt=""
                       cover
                       disableTransition
                       sx="2"/>
                <Grid container spacing={0} mb={2}>
                    <Typography align="left" variant="h4" component="h4" ml={1} mr={2}>
                        TUKAcad
                    </Typography>
                    <Box mt={2}>
                        <Rating size="small" value={4} mt={4} precision={0.5}> </Rating>
                    </Box>
                </Grid>
                <Typography paragraph={true} variant="subtitle1" ml={2}>
                    Pattern-making software with advanced functionality to empower accurate pattern building, bespoke
                    grade rules, and marker nesting for every style conceived.
                </Typography>
                <Box ml={2} >
                    <Button variant="contained"     
                    target={"_blank"} 
                    href="www.tukaweb.com"              
                    className={classes.btn}>
                        {/*<Link to="/yourRoute">Know more</Link>*/}Know More
                    </Button>
                </Box>
            </Paper>
        </Grid>
    );
}

export default TourCard;

CodePudding user response：

one way by adding direct styling :

        <Button style={{
            backgroundColor: "#ffea00",
            fontSize: "12px",
            margin: "4px",
            alignItems: "center"
        }} target={"_blank"} href="www.tukaweb.com">
            {/*<Link to="/yourRoute">Know more</Link>*/}Know More
        </Button>

or one more way:

import React from 'react';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Image from "material-ui-image";
import Typography from '@mui/material/Typography';
import Rating from '@mui/material/Rating';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import {blue, yellow, red} from '@mui/material/colors';

import {Link} from "react-router-dom";

const theme = createTheme({
    palette: {
        primary: blue,
        secondary: yellow,
    },
});

const TourCard = () => {
    return (
        <ThemeProvider theme={theme}>

            <Grid item xs={3}>
                <Paper elevation={4}>
                    <Image src="color-separations_3.png"
                           loading="lazy"
                           className="img"
                           alt=""
                           cover
                           disableTransition
                           sx="2"/>
                    <Grid container spacing={0} mb={2}>
                        <Typography align="left" variant="h4" component="h4" ml={1} mr={2}>
                            TUKAcad
                        </Typography>
                        <Box mt={2}>
                            <Rating size="small" value={4} mt={4} precision={0.5}> </Rating>
                        </Box>
                    </Grid>
                    <Typography paragraph={true} variant="subtitle1" ml={2}>
                        Pattern-making software with advanced functionality to empower accurate pattern building,
                        bespoke
                        grade rules, and marker nesting for every style conceived.
                    </Typography>
                    <Box ml={2}>
                        <Button style={{
                            backgroundColor: "#ffea00",
                            fontSize: "12px",
                            margin: "4px",
                            alignItems: "center"
                        }} target={"_blank"} href="www.tukaweb.com">
                            {/*<Link to="/yourRoute">Know more</Link>*/}Know More
                        </Button>
                    </Box>
                </Paper>
            </Grid>
        </ThemeProvider>

    );
}

export default TourCard;