#発生している問題
Material-UIのwithstyleを使ってスタイリングしたjssクラス名が合致しない.
<head> <style data-jss="" data-meta="makeStyles"> .jss1 { flex-grow: 1; } .jss3 { flex-grow: 1; } </style> <style data-jss="" data-meta="makeStyles"> .jss108 { z-index: 0; overflow: hidden; position: relative; background: url(/src/views/img/head.jpg) no-repeat center; background-size: cover; } .jss108:before { top: -5px; left: -5px; right: -5px; bottom: -5px; filter: blur(5px); content: ; z-index: -1; position: absolute; background: inherit; } </style> <head>
html
1<div class="jss1"><div class="jss3">...<div><div> 2<div class="jss98"><div><!-- なぜかここのクラス名がjss108にならない -->
#環境
NodeでフレームワークExpressを使ってTypescriptで書かれたReactをSSRしている状態にあります.(ここでもSSRしたhtmlのheadにjssのスタイルがないなど問題あり)
#構成
#####サーバーサイドレンダリング
sampleController
1import * as express from 'express'; 2... 3 4export default (req: express.Request, res: express.Response) => { 5 const header = renderToString(React.createElement(Header)); 6 const headnav = renderToString(React.createElement(HeadNav)); 7 8 //cssの生html取得 9 const sheets = new ServerStyleSheets(); 10 renderToString( 11 sheets.collect( 12 React.createElement(Header), 13 React.createElement(HeadNav) 14 ) 15 ); 16 const css = sheets.toString(); 17 18 res.send( 19 html({ 20 css, header, headnav 21 }) 22 ); 23} 24
html
1const html = ( { css, header, headnav }: { css: string, header: string, headnav: string } ) => ` 2 <!DOCTYPE html> 3 <html> 4 <head> 5 ... 6 <style>${css}</style> 7 ... 8 </head> 9 <body style="margin:0"> 10 <div id="header">${header}</div> 11 <div id="headnav">${headnav}</div> 12 </body> 13 <script src="js/bundle.js" defer></script> 14 </html> 15`; 16 17export default html; 18
#####クライアントサイドレンダリング
index
1import React from "react"; 2... 3 4ReactDOM.hydrate( 5 <Header />, 6 document.getElementById("header") 7); 8 9ReactDOM.hydrate( 10 <HeadNav />, 11 document.getElementById("headnav") 12); 13 14ReactDOM.hydrate( 15 <Root compiler="TypeScript" framework="Express" library="React" />, 16 document.getElementById("root") 17); 18
#####Header, HeadNavコンポーネント
Header
1import React from 'react'; 2import { AppBar, Toolbar, Typography, IconButton, createStyles, withStyles, WithStyles } from '@material-ui/core'; 3import MenuIcon from '@material-ui/icons/Menu'; 4 5const styles = createStyles({ 6 root: { 7 flexGrow: 1, 8 }, 9 menuButton: { 10 }, 11 title: { 12 flexGrow: 1, 13 }, 14}); 15 16interface Props extends WithStyles<typeof styles> { 17} 18 19class Header extends React.Component<Props, {}> { 20 render() { 21 const { classes } = this.props; 22 return ( 23 <div className={classes.root}> 24 <AppBar position="static"> 25 <Toolbar> 26 <Typography variant="h6" className={classes.title}> 27 Title 28 </Typography> 29 <IconButton edge="end" className={classes.menuButton} color="inherit" aria-label="menu"> 30 <MenuIcon /> 31 </IconButton> 32 </Toolbar> 33 </AppBar> 34 </div> 35 ); 36 } 37} 38 39export default withStyles(styles)(Header); 40
HeadNav
1import React from 'react'; 2import { createStyles, withStyles, WithStyles } from '@material-ui/core'; 3 4import HeadImg from '../img/head.jpg'; 5 6const styles = createStyles({ 7 blur: { 8 background: `url(${HeadImg}) no-repeat center`, 9 backgroundSize: 'cover', 10 position: 'relative', 11 zIndex: 0, 12 overflow: 'hidden', 13 '&:before': { 14 content: '', 15 background: 'inherit', 16 filter: 'blur(5px)', 17 position: 'absolute', 18 top: '-5px', 19 left: '-5px', 20 right: '-5px', 21 bottom: '-5px', 22 zIndex: -1, 23 } 24 } 25}); 26 27interface Props extends WithStyles<typeof styles> { 28} 29 30const HeadNav: React.FunctionComponent<Props> = (props) => { 31 const { classes } = props; 32 return ( 33 <div className={classes.blur}> 34 モザイクもざいく 35 </div> 36 ); 37}; 38 39export default withStyles(styles)(HeadNav); 40
なぜかjssクラス名が合いません...
なぜか分かる方がいれば教えていただきたいです...
併せてssr時にもjssを反映させる方法もお聞きしたいです.
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。