Кнопка не меняет цвет в моём реагирующем материале - интерфейс. Почему? - PullRequest
Новая
       57

Кнопка не меняет цвет в моём реагирующем материале - интерфейс. Почему?

0 голосов
/ 24 марта 2020

Я хотел изменить цвет моей кнопки на темно-фиолетовый, но он не работает. Ты знаешь почему? Я вставил тему в мой js следующим образом: 

import { useTheme } from "@material-ui/core/styles";

вот мой js, где у меня есть свой стиль и домашний компонент 

const styles = theme => {
  return {
    root: {
      link: {
        display: "flex"
      },
      icon: {
        marginRight: theme.spacing(0.5),
        width: 20,
        height: 20
      },
      flexGrow: 1,
      container: {
        backgroundColor: "",
        padding: "20px",

    margin: "40px 0px 0px 0px"
  },
  gridLeft: {
    backgroundColor: ""
  },
  gridRight: {
    backgroundColor: "",
    textAlign: "center"
  },
  titleTypography: {
    fontFamily: "Montserrat",
    marginBottom: "20px",
    color: "white"
  },
  subtitleTypography: {
    fontFamily: "Montserrat",
    marginBottom: "20px"
  },
  titleButton: {
    fontFamily: "Montserrat",
    marginBottom: "20px",
    color: "white",
    backgroundColor: theme.palette.info.dark
  }
}

};

И вот как я использовал это в своем jsx: 

<Button
          variant="contained"
          size="large"
          className={titleButton}
          component={Link}
          to="/register"
        >
          Get started
        </Button>

и вот мой информационный цвет моей темы: 

export const teechrTheme = createMuiTheme({
  palette: {
    primary: {
      light: "#fff",
      main: "#fafafa",
      dark: "#e0e0e0",
      contrastText: "#fff"
    },
    secondary: {
      light: "#fff176",
      main: "#ffee58",
      dark: "#fdd835",
      contrastText: "#fff"
    },
    info: {
      light: "#7e57c2",
      main: "#673ab7",
      dark: "#5e35b1",
      contrastText: "#fff"
    }

Большое спасибо за вашу помощь !

1 Ответ

0 голосов
/ 24 марта 2020

Здравствуйте, и спасибо за вопрос.

Прежде всего, мне не понятно, как вы вводите / добавляете тему в свои компоненты,

Сначала импортируйте ThemeProvider и Рэп вокруг дерева компонентов, где вы обычно выполняете маршрутизацию.

Это должно быть в App. js

import { ThemeProvider } from '@material-ui/styles';

, затем рэп компонентов с 

 <ThemeProvider theme={theme}> 
<Header/>
<Content/>
<Footer/>
</ThemeProvider>

Это то, как вы вводите тему в свои компоненты.

Переходя к изменению цвета вашей кнопки, я написал для вас небольшой компонент реакции, который меняет цвет вашей кнопки. Здесь вы go надеетесь, что это поможет:) 

import React from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  purpleButton: {

    backgroundColor: "#4a148c", // you can add your specific CSS here.

  }
}));

const PurpleButton = () => {

  const classes = useStyles();

  return (
    <div>
      <Button className={classes.purpleButton} variant="contained"> Get started </Button>
    </div>
  );
};

export default PurpleButton;

В вышеприведенном примере я использовал следующий хук "const classes = useStyles ()", чтобы изменить цвет кнопки. Я думаю, что это проблема, потому что она отсутствует в вашем коде.

Дайте мне знать, если вам нужно больше разъяснений, я рад помочь.

...