样式化的jsx动态样式未应用

Question

背景：

App中的GridPreview接受"长度和宽度"，用于渲染for loop中的子元素GridTile

出了什么问题

不应用GridTile组件内部的样式。

vscode 0错误，0警告。已成功编译Webpack。浏览器控制台0错误。

import React, { useState, useEffect, useCallback } from "react";
import ReactDOM from "react-dom";
function App() {
const [gridW, setGridW] = useState<number>(5);
const [gridH, setGridH] = useState<number>(5);
const setGrid = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const current = e.currentTarget;
switch (current.className) {
case "setGridW": {
setGridW(parseInt(current.value));
break;
}
case "setGridH": {
setGridH(parseInt(current.value));
break;
}
}
}, []);
useEffect(() => {}, [gridW, gridH]);
return (
<>
<div className="gridSizeSetting">
<label htmlFor="">
width
<input
type="range"
min="1"
max="24"
step="1"
value={gridW}
className="setGridW"
onChange={setGrid}
name=""
id=""
/>
</label>
<span>X</span>
<label htmlFor="">
height
<input
type="range"
min="1"
max="24"
step="1"
value={gridH}
className="setGridH"
onChange={setGrid}
name=""
id=""
/>
</label>
</div>
<GridPreview w={gridW} h={gridH}></GridPreview>
</>
);
}
function GridTile({
indexOfW,
indexOfH,
}: {
indexOfW: number;
indexOfH: number;
}) {
return (
<div className={`tile ${indexOfW}-${indexOfH}`}>
{`${indexOfW}-${indexOfH}`}
<style jsx>{`
div {
background-color: rgb(
${Math.random() * 100 + 100},
${Math.random() * 100 + 100},
${Math.random() * 100 + 100}
);
justify-self: stretch;
align-self: stretch;
grid-column: ${indexOfH + 1};
grid-row: ${indexOfW + 1};
}
`}</style>
</div>
);
}
function GridPreview({ w, h }: { w: number; h: number }) {
const tiles: Array<JSX.Element> = [];
for (let indexOfW = 0; indexOfW < w; indexOfW++) {
for (let indexOfH = 0; indexOfH < h; indexOfH++) {
tiles.push(
<GridTile
key={`${indexOfW},${indexOfH}`}
indexOfH={indexOfH}
indexOfW={indexOfW}
></GridTile>
);
}
}
return (
<div className="container">
{tiles}
<style jsx>{`
.container {
height: 800px;
display: grid;
grid-template-rows: repeat(${w}, 1fr);
grid-template-columns: repeat(${h}, 1fr);
}
`}</style>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));

浏览器屏幕截图

react开发工具屏幕截图

Answer 1

似乎styled-jsx只能接收简单的字符串或表达式。

请参阅：https://github.com/zeit/styled-jsx/issues/595

function GridTile({
indexOfW,
indexOfH,
}: {
indexOfW: number;
indexOfH: number;
}) {
const color = `rgb(
${Math.random() * 100 + 100},
${Math.random() * 100 + 100},
${Math.random() * 100 + 100}
)`;
return (
<div className={`tile ${indexOfW}-${indexOfH}`}>
{`${indexOfW}-${indexOfH}`}
<style jsx>{`
.tile {
background-color: ${color};
justify-self: stretch;
align-self: stretch;
grid-column: ${indexOfH + 1};
grid-row: ${indexOfW + 1};
}
`}</style>
</div>
);
}

将background-color从<style jsx>移出是可行的。

Answer 2

我不知道如何使用<style jsx>，但您可以使用内联样式，比如

let container = {
height: '800px',
display: 'grid',
gridTemplateRows: `repeat(${w}, 1fr)`,
gridTemplateColumns: `repeat(${h}, 1fr)`
}
      
 return (
    <div style={container}>
      {tiles}
    </div>
  );

编辑：

在分析了代码之后，我认为这就是问题所在：

background-color: rgb(
${Math.random() * 100 + 100}px,
${Math.random() * 100 + 100}px,
${Math.random() * 100 + 100}px
);

您正在指定值​​rgb((的(以像素为单位(。

Answer 3

GridTile组件内部的样式不应用。

vscode 0错误，0警告。已成功编译Webpack。浏览器控制台0错误。