Изменить цвет бумаги Материал-интерфейс - PullRequest
Новая
       26

Изменить цвет бумаги Материал-интерфейс

2 голосов
/ 06 апреля 2019

Я занимаюсь разработкой проекта React с использованием библиотеки material-ui.В настоящее время я пытаюсь добавить ящик, который мне подходит.Однако я пытаюсь изменить цвет фона этого ящика.Я слышал, что это можно сделать, изменив цвет бумаги в ящике.Я попытался добавить следующий тег в мой объект CSS: 

const styles = theme => ({
    background:"BLUE"

Затем я ссылаюсь на этот объект в моей функции рендеринга с помощью библиотеки classNames: 

  render(){
        const { classes } = this.props;
        return(
    <div className={styles.root}>
    <CssBaseline />
    <Drawer 
    variant="permanent" 
    className={classNames(classes.drawer, {
        [classes.drawerOpen]: this.state.open,
        [classes.drawerClose]: !this.state.open
    })}
    classes = {{
        paper: classNames({
            background:classes.background,
            [classes.drawerOpen]: this.state.open,
            [classes.drawerClose]: !this.state.open
        })
    }}

Однако, когда я запускаюэто на localhost, бумага по-прежнему простой старый белый.Я что-то упускаю из библиотеки classNames или это особый случай бумажного тега?Заранее спасибо, и дайте мне знать, если я должен предоставить больше информации, чем это.

1 Ответ

1 голос
/ 07 апреля 2019

У вас есть пара проблем в коде, показанном в вашем вопросе.

Для ваших стилей вам нужно что-то более похожее на следующее: 

const styles = theme => ({
    drawerPaper: { background: "blue" }
});

В этом случае «pocketPaper»является ключом для моего имени класса, а затем объект справа содержит свойства CSS для этого класса.Когда передано в withStyles, это сгенерирует CSS следующим образом: 

<style>
.classname-generated-for-drawerPaper-key: {
  background: blue;
}
</style>

У вас был ключ имени класса «background» со строкой «BLUE» в качестве свойств CSS, которые в конечном итоге заканчиваются CSSнапример: 

<style>
.classname-generated-for-background-key: {
  0: B;
  1: L;
  2: U;
  3: E;
}
</style>

, который, конечно, не является допустимым CSS и не будет влиять на бумагу.

Вторая проблема заключается в том, как указывать классы: 

    classes = {{
        paper: classNames({
            background:classes.background,
            [classes.drawerOpen]: this.state.open,
            [classes.drawerClose]: !this.state.open
        })
    }}

Когда вы передаете объект в classNames, ключами объекта являются имена классов и связанные с ними значения, которые управляют (в зависимости от того, ложно это или верно), следует ли включать имя класса.С синтаксисом, который вы использовали, classes.background всегда будет верным, что означает, что будет включен класс "background" (а не сгенерированное имя класса в classes.background), что не будет иметь никакого эффекта, так как класс "background" не имеетбыл определен.

Вместо этого вы должны иметь: 

    classes = {{
        paper: classNames(classes.drawerPaper, {
            [classes.drawerOpen]: this.state.open,
            [classes.drawerClose]: !this.state.open
        })
    }}

, который безоговорочно будет включать classes.drawerPaper.

Вот модифицированная версия одного из демонстрационных примеров Drawer, ноцвет фона ящика изменился на синий: https://codesandbox.io/s/wqlwyk7p4l

...