Question

我正在使用material-ui-next并定制主题以使用我的颜色样式和自定义字体。例如。排版小标题

我现在正尝试将组件呈现为字符串，以便在Google地图信息窗口中使用。传递给withStyles的回调styles对象中提供了默认的material-ui主题，但theme回调中的styles参数中没有任何自定义可用，也未应用。否则渲染的字符串正确呈现（虽然没有我预期的事件）。

更简洁地说，正常渲染时，自定义适用。渲染到字符串时，它们不会。

一个简单的例子是一个正确运行withStyles的组件，但是返回div而不是目标组件ala：

let output = ReactDOMServer.renderToString(component); return <div dangerouslySetInnerHTML={{__html: output}} />

有关如何将主题自定义设置传递给withStyles回调theme参数的任何提示？

Answer 1

解决方案是创建一个父组件，将目标组件呈现为ThemeProvider的子组件。仍然没有事件处理程序（如预期的那样），但主题自定义适用。

以下是解决方案：

MyThemeProvider.js（组件也可以轻松地重复用于SSR）

export default function MyThemeProvider({children}) {
  const muiTheme = createMuiTheme({
    typography: {
      fontFamily: '"Bryant", "Helvetica", "Arial", sans-serif',
    },
    palette: {
      primary: customBluePalette,
    },
    // ... 
  });
  return (<MuiThemeProvider theme={muiTheme}>{ children }</MuiThemeProvider>);
}

MapInfoWindowContent.js（这里只存在VenueRenderer和我们的主题提供者）

import MyThemeProvider from '../MyThemeProvider';
import VenueRenderer from '../VenueRenderer';
export default function MapInfoWindowContent({resource}) {
  return (<MyThemeProvider><VenueRenderer resource={resource} /></MyThemeProvider>);
}

VenueRenderer（样式类 - 也可以独立于MapInfoWindowContent使用）

const styles = (theme) => {
    // theme.palette.primary['500'] comes from customBluePalette so the injection worked.
}
// ...
export default withStyles(styles, { withTheme: true })(VenueRenderer);

在其他需要HTML str

的组件中

import ReactDOMServer from 'react-dom/server'
import MapInfoWindowContent from '../MapInfoWindowContent';

let infoWindowComponent = (<MapInfoWindowContent resource={ ... }/>);
let output = ReactDOMServer.renderToString(infoWindowComponent);
// output will have correctly injected classNames that contain customizations

在客户端

1 个答案: