reactjs - styled-jsx 动态样式未应用

Question

背景：

GridPreview在接受“长度和宽度” ，App用于渲染子元素GridTilefor loop

怎么了

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"));

浏览器截图

反应开发工具截图

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 错误。