Reactjs 在React中设置响应处理程序，然后在scss中使用它们

我有一个自定义钩子，可以检测应用程序是移动版还是桌面版。提供2个版本的组件是可行的，但我不知道如何将变量传递到scss文件

在我的app.js中，我有几个类是基于scss文件中的

@media（最大宽度：768px）

修改的。如果我只有一个样式，但是有多个样式，我想找到一种方法来设置使用哪种样式

如何使用

{windowSize}

将JS变量传递给.scss文件？如果我使用样式化组件，它会是什么样子

import "./app.scss";
import useWindowSize from "./useWindowSize";

export default function App() {
  const windowSize = useWindowSize();
  return (
    <div className="App">
      <h1>Making the app responsive</h1>
      <h2 className="TestTitle">{windowSize}</h2>
      <p className="BoxWidth">Hello world</p>
    </div>
  );
}

---

如果需要，您可以使用

例如：

export default function App() {
  const windowSize = useWindowSize();
  const csTestTiele = windowSize <= 768 ? "TestTitleSmall" : "TestTitleNormal";
  const csBoxWidth = windowSize <= 768 ? "BoxWidthSmall" : "BoxWidthNormal";
  return (
    <div className="App">
      <h1>Making the app responsive</h1>
      <h2 className={csTestTiele}>{windowSize}</h2>
      <p className={csBoxWidth}>Hello world</p>
    </div>
  );
}

导出默认函数App（）{
const windowSize=useWindowsSize（）；
const csTestTiele=windowSize以下是您可以使用的方法：

const-Box=styled.div`//或“p”，具体取决于要使用的元素
背景颜色：绿色；
//请注意，您正在使用需要传入的“宽度”道具
@介质（最大宽度：${（{width}）=>width}）{
背景颜色：浅蓝色；
}
`;
导出默认函数App（）{
const windowSize=useWindowsSize（）；
返回(
...
//将窗口大小作为宽度道具传入
你好，世界
);
}

看

编辑

我们在聊天中澄清了问题。这是解决方案：

const commonStyles = { background: "pink", height: 100, margin: "0 auto" };
const SmallComponent = () => <div style={{ ...commonStyles, width: "100%" }} />;
const LargeComponent = () => (
  <div style={{ ...commonStyles, width: "500px" }} />
);

const Box = styled.div`
  color: white;
  background-color: ${({ isMobile }) => (isMobile ? "green" : "lightblue")};
`;

export default function App() {
  const windowSize = useWindowSize();

  const isMobile = windowSize === "useMobileVersion";

  return (
    <div className="App">
      <h1>Making the app responsive</h1>
      <h2>{windowSize}</h2>
      <Box isMobile={isMobile}>Hello world</Box>
      {isMobile ? <SmallComponent /> : <LargeComponent />}
    </div>
  );
}

constcommonstyles={背景：“粉色”，高度：100，边距：“0自动”}；
常量SmallComponent=（）=>；
常量组件=（）=>(
);
常量框=styled.div`
颜色：白色；
背景色：${（{isMobile}）=>（isMobile？“绿色”：“浅蓝色”）}；
`;
导出默认函数App（）{
const windowSize=useWindowsSize（）；
const isMobile=windowSize==“useMobileVersion”；
返回(
使应用程序具有响应性
{windowSize}
你好，世界
{isMobile？：}
);
}

原始的codesandbox链接已更新为最新的答案。
简短的答案是你不能将JS变量传递到.scss文件。样式化组件或JS库中的其他CSS是一个选项吗？是的，样式化组件看起来是我现在唯一能看到的方式。这看起来如何？@Aron，如果你想将你的评论作为答案发布，我很高兴奖励，因为它可能会帮助其他人。这些示例仅显示如何动态选择类名。我必须为每个css类构建2个类名，这不是我要寻找的。那么你想要什么？我正在寻找一个理想的解决方案，其中我只需要在1个位置检测移动/桌面。事实证明，我需要在re中同时检测这两个类act/js和scss。使用样式化组件可能会有所帮助，但我认为这对于这个问题来说太过分了。我认为@aron上面的评论是正确的答案：简而言之，我不能将js变量传递给.scss文件。我开发了一个库。它在运行时根据模板生成样式表。你可以将js变量注入模板在运行时。Mybe这是您想要的。但我发现其他一些更著名的库（如样式化组件）支持类似的功能，所以我现在没有维护它。感谢您的共享。我将查看您的主题化样式，但正如您所建议的，我可能会使用样式化组件。尽管我只是查看了修改后的沙盒和我认为对“WindowsSize”存在误解，因为其值是文本：“useMobileVersion”或“useDesktopVersion”。我们可以使用数字值，而不是布尔值，因为我可能会在未来的项目中扩展到平板电脑。当然，我只是假设它们是数字，但概念是相同的。一旦您在组件中获得有关屏幕大小的信息，您就可以传入宽度属性。
windowSize
是数字还是字符串至少，设置另一个变量并不重要。逻辑是一样的。你能帮助修改沙盒吗？我对reactjs相对较新，理解这个概念，但很难获得所需的结果。你想帮助更改钩子吗？或者调整我的组件代码以使用钩子返回字符串吗？无论你觉得哪一个最好？我是请务必更改挂钩（至少更改为数字），并可能更改组件。
import cs from 'classnames';
export default function App() {
  const windowSize = useWindowSize();
  const csTestTiele = cs({
    TestTieleSmall: windowSize <= 768,
    TestTieleNormal: windowSize > 768,
  });
  const csBoxWidth = cs({
    BoxWidthSmall: windowSize <= 768,
    BoxWidthNormal: windowSize > 768,
  });
  return (
    <div className="App">
      <h1>Making the app responsive</h1>
      <h2 className={csTestTiele}>{windowSize}</h2>
      <p className={csBoxWidth}>Hello world</p>
    </div>
  );
}

const Box = styled.div` // or 'p' depending on which element you want to use
  background-color: green;

  // Note that you are using a 'width' prop that needs to be passed in
  @media (max-width: ${({ width }) => width}) {
    background-color: lightblue;
  }
`;

export default function App() {
  const windowSize = useWindowSize();
  return (
    <div className="App">
      ...
      // You pass the window size in as the width prop
      <Box width={windowSize}>Hello world</Box>
    </div>
  );
}

const commonStyles = { background: "pink", height: 100, margin: "0 auto" };
const SmallComponent = () => <div style={{ ...commonStyles, width: "100%" }} />;
const LargeComponent = () => (
  <div style={{ ...commonStyles, width: "500px" }} />
);

const Box = styled.div`
  color: white;
  background-color: ${({ isMobile }) => (isMobile ? "green" : "lightblue")};
`;

export default function App() {
  const windowSize = useWindowSize();

  const isMobile = windowSize === "useMobileVersion";

  return (
    <div className="App">
      <h1>Making the app responsive</h1>
      <h2>{windowSize}</h2>
      <Box isMobile={isMobile}>Hello world</Box>
      {isMobile ? <SmallComponent /> : <LargeComponent />}
    </div>
  );
}