React 17.0.2环境下基于Material UI修改按钮颜色为黄色的实现方法咨询

Hey there! Let's get that button looking bright yellow like you want. I spotted a couple of small issues in your code that are keeping the theme from working as expected—here's how to fix them step by step:

Key Problems in Your Current Code #

• You created a custom theme with secondary: yellow, but you haven't wrapped your component with ThemeProvider to make the theme available to child components like the Button.
• The color prop on your Button is set to theme.palette.secondary (an object), but it expects a string like "secondary" instead.

Step-by-Step Fix #

1. Import ThemeProvider #

First, add this import at the top of your file (it comes from Material UI's styles package):

import { ThemeProvider } from '@mui/material/styles';

2. Wrap Your Component with ThemeProvider #

Wrap your entire TourCard return content inside ThemeProvider, passing your custom theme as a prop. This makes your theme settings accessible to all MUI components in the tree.

3. Fix the Button's Color Prop #

Change the Button's color prop from theme.palette.secondary to "secondary"—this tells MUI to use the secondary color from your theme.

Modified Full Code #

Here's your updated code with all fixes applied:

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'; // Added ThemeProvider import
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}> {/* Wrapped component in ThemeProvider */}
 <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="secondary" target="_blank" href="www.tukaweb.com"> {/* Fixed color prop */}
 Know More
 </Button>
 </Box>
 </Paper>
 </Grid>
 </ThemeProvider>
 );
}
export default TourCard;

Alternative: Directly Customize with sx Prop #

If you don't want to use the theme for this specific button, you can skip the theme setup and directly set the color using the sx prop:

<Button 
  variant="contained" 
  sx={{ backgroundColor: yellow[500], '&:hover': { backgroundColor: yellow[700] } }}
  target="_blank" 
  href="www.tukaweb.com"
>
  Know More
</Button>

This lets you pick exact shades from MUI's color palette (e.g., yellow[500] is a standard bright yellow, yellow[700] is a darker hover shade).

Give these changes a try—your button should now show up bright yellow as expected!

内容的提问来源于stack exchange，提问作者vidur punj