To define media queries, include them as top-level keys in your style object. Each media query is defined as a key (e.g., "@desktop") and contains styles that apply only when the specified condition is met. Breakpoints are predefined for consistency across your project.
const style = st({
componentId: "components/docs/media-query",
container: {
display: "flex",
justifyContent: "center",
padding: "20px",
backgroundColor: "lightgray",
},
"@mobile": {
container: {
backgroundColor: "pink",
padding: "10px",
},
},
"@tablet": {
container: {
backgroundColor: "lightblue",
padding: "15px",
},
},
"@desktop": {
container: {
backgroundColor: "lightgreen",
width: "50%",
},
},
});