如何在Nextjs中将媒体查询应用于对象CSS

Question

我在一个对象中编写了 CSS 并将其导出，以便组件可以使用它。

风格.ts

import { CSSType } from '@/types/Common';

const styles: CSSType = {
  concurrentCard: {
    width: 300,
    border: '1px solid rgba(0, 0, 0, .125)',
    padding: '1rem',
  },
};

export default styles;

我想当屏幕为425px或以下时，宽度为200。 我尝试在 chatgpt 中询问，但没有成功。

聊天gpt

styles['@media (max-width: 425px)'] = {
  concurrentCard: {
    width: '200px'
  },
};

我将不胜感激任何帮助，提前致谢。

Answer 1

const mediaQuery = `@media (min-width: 768px)`;

styles.concurrentCard[mediaQuery] = {
width: 500,
};

试试这个。