Setting responsive handlers in React then using them in scss - reactjs

Question

I have a custom Hook that detects whether the app is the mobile or desktop version. Serving up 2 versions of components works but I am at a loss on how to pass the variable to a scss file.
The code sandbox demo is here.
In my app.js I have a couple of classes that are modified based on #media (max-width: 768px) within the scss file. This would be fine if I only had 1 style but with multiple styles, I would like to find a way to set in React which style to use.
How do I use {windowSize} to pass a JS variable to a .scss file? If I used styled-component what would it look like?
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>
);
}
Styling looks like this:
$width: 768px;
$Colour1: rgb(0, 255, 213);
.BoxWidth {
background-color: green;
#media (max-width: $width) {
background-color: lightblue;
}
}

Answer 1

This is how you can do it with styled-components:
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>
);
}
See your modified codesandbox
EDIT
We clarified the question in chat. To which this is the solution:
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>
);
}
The original codesandbox link has been updated with this latest answer.

Answer 2

You can just use if else.
For example:
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>
);
}
or use classnames library:
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>
);
}