0

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

我现在正在尝试将组件呈现为字符串以在谷歌地图信息窗口中使用。默认 material-ui 主题在styles传递给 withStyles 的回调对象中可用，但我的自定义theme在回调中的参数上均不可用，styles也未应用。渲染的字符串以其他方式正确渲染（尽管没有我预期的事件）。

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

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

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

任何提示如何将我的主题自定义传递到 withStyles 回调theme参数？

4

1 回答 1

0

解决方案是创建一个父组件，将目标组件呈现为 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
于 2017-11-26T00:12:35.910 回答