Изменение стиля на <body> Элемент

Я новичок в реактиве, так что это может быть просто, но я не могу на всю жизнь найти что-либо в документах, потому что этот элемент находится за пределами ReactDOM.Изменение стиля на <body> Элемент

Я использую материал-ui для пользовательского интерфейса и предоставляет две темы: lightBaseTheme (по умолчанию) и darkBaseTheme с более темными цветами. Вид дневных и ночных режимов. Проблема в том, что ни один стиль не применяется к <body>, поэтому фон страницы не следует теме. Темная тема использует белый текст, который не отображается на белом фоне по умолчанию.

Я подозреваю, что мне нужно найти программное решение и установить цвет фона на основе загруженной в данный момент темы.

Но как? Я попытался поставить код в методе componentDidUpdate компонента верхнего уровня, но, похоже, всегда возвращает светлую тему. В любом случае я не уверен, что правильная практика заключается в прямой записи в DOM, хотя элемент body находится за пределами того, на что повлияет React.

export default class app extends React.Component { 

    componentDidUpdate() { 
     const muiTheme = getMuiTheme(); 
     const canvasColor = muiTheme.palette.canvasColor; 
     document.body.style.backgroundColor = canvasColor; 
    } 

    render() { 
     const muiTheme = getMuiTheme(); 
     return (
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
       <span>Rest of the app goes here</span> 
      </MuiThemeProvider> 
     ); 
    } 
};

Вызов getMuiTheme в componentDidUpdate всегда возвращает lightBaseTheme даже после того, как было установлено в визуализации вызова.

Возможно, я должен добавить, что конечная цель заключается в том, чтобы иметь возможность изменять тему на лету, поэтому прямое стилизация элемента <body не является вариантом.

источник

2016-11-22 amay

стилизация бы некоторые 'div' оборачивать все приложения, вместо' body' служить вашим потребностям? Таким образом, вы можете использовать стандартные реквизиты 'style'. –

Если возможно, лучшим решением будет использование верхнего уровня div внутри вашего приложения React в дополнение к реквизитам стиля для решения вашей проблемы.

Однако у вас сейчас нет работы, потому что componentDidUpdate() не вызывается при инициализации, и вы, кажется, ничего не обновляете с помощью реквизита/состояния после загрузки.

componentDidUpdate() вызывается сразу после того, как происходит обновление. Этот метод не вызывается для первоначального рендеринга. (React Docs)

Вместо этого используйте componentDidMount(), который называется как только компонент крепления к вашему DOM.

componentDidMount() вызывается сразу после того, как компонент монтируется. Инициализация, требующая узлов DOM, должна идти здесь. Если вам нужно загружать данные с удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса. Состояние настройки в этом методе вызовет повторный рендеринг. (React Docs)

Here's a good write up on the component lifecycle.

источник

2016-11-22 16:17:27

Первый уровень DIV в приложении React был моим первым подходом, но я не смог его отобразить на всей странице. Однако это породило еще одну проблему, которая может быть лучше, чем другой вопрос. – amay

Я выбрал componentDidUpdate, потому что мне нужно было его обновить, если тема была изменена. Даже с этим ограничением getMuiTheme возвращал светлую тему, даже если использовалась темная тема. – amay

Высший уровень DIV был таким, каким я его окончательно решил. У меня была минимальная высота, установленная на элементе html и изменяющая ее по высоте: 100% заполняет страницу. Не знаю, что вызовет проблемы позже, если он переполнит страницу. Но сейчас я могу создать фон, который я хотел. – amay

Вы можете использовать document.body.className. Отъезд w3schools. А компонентDidMount - лучшее место, чтобы его поместить.

источник

2016-11-22 16:32:59

Я не уверен, что это позволит мне изменить стиль на лету. Если это не было требованием, это кажется идеальным решением. – amay

Это геттер/сеттер, поэтому он должен работать «на лету». –

Вы можете записать тему во время обратного вызова «ref» и назначить ее переменной.Затем выберите это переменный в componentDidMount() (вызываются только один раз, в то время как componentDidUpdate() называется любым реквизит и состояние изменяется):

export default class app extends React.Component { 

    componentDidMount() { 
     const canvasColor = this.theme.palette.canvasColor; 
     document.body.style.backgroundColor = canvasColor; 
    } 

    render() { 
     const muiTheme = getMuiTheme(); 
     return (
      <MuiThemeProvider ref={ref => (this.theme = ref.props.muiTheme)} muiTheme={getMuiTheme(darkBaseTheme)}> 
       <span>Rest of the app goes here</span> 
      </MuiThemeProvider> 
     ); 
    } 
};

источник

2016-11-22 17:23:16

ответ

Смежные вопросы