<body>元素上的樣式

我是React的新手，所以這可能很簡單，但我不能在我的生活中找到文檔中的任何內容，因爲元素不在ReactDOM中。<body>元素上的樣式

我正在使用material-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'道具。 –

如果可能，最好的解決方案是在React應用程序中使用頂級div，除了樣式道具來解決您的問題。

但是，你現在不能工作，因爲componentDidUpdate()不會在初始化時被調用，並且在加載後似乎沒有任何東西用props/state進行更新。

在更新發生後立即調用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

React App中的頂級DIV是我的第一種方法，但我無法在整個頁面上呈現它。然而，這引發了另一個問題，作爲一個不同的問題可能會更好。 – amay

我選擇了componentDidUpdate，因爲如果主題被更改，我需要它來更新。即使有這個限制，getMuiTheme即使在使用黑暗主題時也會返回輕量級主題。 – amay

頂級DIV是我最終解決它的方式。我在HTML元素上設置了最小高度並將其更改爲高度：100％填充頁面。不知道這會導致問題，但如果它溢出了頁面。但現在我可以設計出我想要的背景。 – amay

您可以使用document.body.className。退房w3schools。 componentDidMount是一個更好的放置它的地方。

來源

2016-11-22 16:32:59

我不確定這會讓我改變風格。如果這不是要求，這似乎是一個理想的解決方案。 – amay

這是一個getter/setter，所以應該在飛行中工作。 –

您可以在「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

<body>元素上的樣式

回答

相關問題