Блог

Главная - Вопросы по программированию - Какова альтернатива стилям создания для Material UI v. 5

Какова альтернатива стилям создания для Material UI v. 5

#javascript #reactjs #material-ui

Вопрос:

Я только начал использовать интерфейс Material UI версии 5. Первоначально для использования стилей моей пользовательской темы я бы использовал стили создания, но, похоже, это не работает в версии 5. Мои темы находятся в отдельном компоненте, и для их импорта я использовал {createTheme} вместо старых {createMuiTheme} . Моя тема импортирована в родительский компонент, как обычно, и настроена как <ThemeProvider theme{theme}></ThemeProvider> .

Теперь, на моем другом компоненте, я снова пытался использовать стили использования, но это не сработало, потому что оно не используется в версии 5. Мне трудно понять, как его преобразовать, чтобы его можно было использовать в версии 5. Вот часть незаконченного кода, над которым я работал:

 const useStyles = makeStyles((theme) => ({
    logo: {
        height: "8em",
        marginLeft: "0.2em",
    },
    tabContainer: {
        marginLeft: "auto",
    },
    tab: {
        ...theme.typography.tab,
        minWidth: 10,
        marginRight: "50px",
        opacity: 1,
        "amp;hover": {
            color: theme.palette.common.purple,
            textDecoration:"none",
        },
    },
}));

export default function Navigation(props) {
    const classes = useStyles();

    const [value, setValue] = useState(0);

    const handleChange = (e, value) => {
        setValue(value);
    };
    const refreshPage = () => {
        window.location.reload();
    };
    
    useEffect(() => {
        switch (window.location.pathname) {
            case "/":
                if (value !== 0) {
                    setValue(0);
                }
                break;
                default:
                break;
        }
    }, [value]);


    return (
      <React.Fragment>
        <ElevationScroll>
          <AppBar
            position="relative"
            style={{
              borderBottom: "2px solid black",
            }}
          >
            <Toolbar disableGutters>
                <img src={logo} alt="nasa logo" className={classes.logo}/>
                <Typography variant="h1" style={{ textAlign: "center" }}>
                  Nasa<br></br>Photos
                </Typography>
                <Tabs
                  value={value}
                  onChange={handleChange}
                  className={classes.tabContainer}
                  indicatorColor="primary"
                >
                  <Tab
                    className={classes.tab}
                    component={Link}
                    onClick={refreshPage}
                    to="/"
                    label="Home"
                  />
                </Tabs>
            </Toolbar>
          </AppBar>
        </ElevationScroll>
      </React.Fragment>
    );
}

Я читал о свойстве xs, а также слышал о функции styled() в документации Material UI, но мне трудно применить ее к написанному мной коду, и я хотел бы подтолкнуть в правильном направлении.

Поэтому, чтобы отредактировать то, что у меня было ранее, я также добавлю свой Theme.js файл тоже. Я думал, что это было сделано правильно, но опять же он не читает ни мою вкладку, ни мою палитру.

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

const pink = "#FFC0CB";
const lightblue = "#ADD8E6";
const purple = "#800080";
const black = "#000000";

const theme = createTheme({
    palette: {
        common: {
            pink: pink,
            lightblue: lightblue,
            purple: purple,
            black: black
        },
        primary: {
            main: pink,
            mainGradient: "linear-gradient(to left, purple, pink)",
        },
        secondary: {
            main: lightblue,
            mainGradient: "linear-gradient(to right, lightblue, pink)"
        },
    },
    typography: {
        tab: {
            fontFamily:"Orbitron",
            textTransform: "none",
            fontSize: "2.5rem",
            color: black,
        },
        h1: {
            fontFamily: "Orbitron",
            fontSize: "2.5em"
        },
        h2: {
            fontFamily: "Orbitron",
            fontSize: "2.5em"
        },
        subtitle1: {
            fontFamily: "Orbitron"
        },
        subtitle2: {
            fontFamily: "Orbitron",
            fontSize: "1.5rem"
        },
        buttons: {
            fontFamily: "Orbitron",
            textTransform: "none"
        },
    },
});

export default theme

Я импортировал свою тему в свою App.js файл, который является моим файлом верхнего уровня, я включу его сюда на тот случай, если с этим что-то было сделано не так:

 import React,{useState} from "react";
import PicOfDay from "./Components/PictureOfDay";
import Navigation from "./Components/Navigation";
import {
  Typography,
} from "@mui/material";
import {ThemeProvider} from '@mui/material/styles'
import theme from "../src/ui/Theme";
import {BrowserRouter as Router} from "react-router-dom";

function App(props) {
  const [date, setDate] = useState(new Date());
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <Navigation date={date} setDate={setDate} />
        <Typography
          variant="h1"
          style={{fontSize: "5rem", textAlign: "center", marginTop:"2rem"}}
          >
            Astronomy Picture of the Day
        </Typography>  
        {/* <PicOfDay date={date} /> */}
      </Router>
    </ThemeProvider>
  );
}

export default App;

Я просмотрел некоторую документацию, которую вы мне прислали, и я просматривал часть по устранению неполадок, в которой говорилось, что «[Типы] Свойства «палитра», «интервал» не существует для типа» DefaultTheme»», потому что makeStyles экспортируется по-другому, и он не знает о теме. Кажется, есть сниппет для вставки в проект машинописи (который я не запускаю, я использую javascript), и там был раздел для добавления файла ts в мой javascript и размещения рекомендованного фрагмента, который я пробовал, но я что-то упустил, потому что он ничего не сделал, и я не уверен, нужно ли мне что-то добавить в свой javascript. App.js файл для того, чтобы он мог это прочитать?

Ответ №1:

Вы все еще можете использовать makeStyles utils как то, что вы используете, но в материале v5, если вам нравится это делать, вам нужно установить еще один пакет @mui/styles и

 import { makeStyles } from '@mui/styles';

https://mui.com/guides/migration-v4/#mui-material-styles

Утилита makeStyles JSS больше не экспортируется из @mui/материал/стили. Вместо этого вы можете использовать @mui/стили/стили создания.

Кроме того, вам нужно добавить tab и purple createTheme , если они вам нужны

 const theme = createTheme({
  typography: {
    tab: {
      fontSize: 20,
    },
  },
  palette: {
    common: {
      purple: 'purple',
    },
  },
})

Комментарии:

1. Я проверил, и у меня уже был установлен @mui/стили. У меня есть стили, импортированные как: import {makeStyles} from "@mui/styles" и это все еще не работает. Я замечаю в своем коде vs, когда копаюсь в своем распространении ...theme.typography.tab , и color: theme.palette.common.purple в нем говорится (параметр) тема: Тема по умолчанию, когда раньше в v. 4 говорилось (параметр) тема: Тема

2. да, это правда, в v5 тема имеет тип DefaultTheme вместо на тему как v4>, так как makeStyles теперь экспортируется из пакета @mui/styles, который не знает о теме в основном пакете. mui.com/guides/migration-v4/… В вашем случае вам нужно добавить tab и purple в createTheme ` const theme = createTheme({ типография: { вкладка: { Размер шрифта: 20, }, }, палитра: { общий: { фиолетовый: ‘фиолетовый’, }, }, }) `

3. Я добавил больше в свой первоначальный пост

4.Хорошо, одна важная вещь при выполнении такого рода миграции вам нужно иметь опцию StyledEngineProvider с injectFirst в верхней части дерева компонентов mui.com/guides/migration-v4/#style-library

5. Вот и все! Когда я использовал<StyledEngineProvider injectFirst>, это исправило мои проблемы с неработающими стилями. Я только что понял, что в одном из моих стилей макияжа была опечатка, я неправильно написал типографию. После осознания этого это сработало. Кроме того, у меня просто возникла странная проблема, когда моя первая вкладка не отображается. Если у меня есть вторая вкладка, отображается 2-я вкладка, но первая по-прежнему не отображается. Я думаю, что, вероятно, лучше задать этот вопрос в качестве другого вопроса. Можете ли вы также включить это в свой ответ

Ответ №2:

На основе документации:

@mui/стили-это устаревшее решение для создания стилей для MUI. Он устарел в версии 5. Это зависит от JSS как решения для укладки, которое больше не используется в @mui/материале.

Вы можете использовать-sx-реквизит или стиль

Метки: