Используйте свойства для переключения ширины с помощью миксинов стилизованных компонентов
Используемая технология — стилизованные компоненты и реакция
У меня есть миксин, чтобы сделать мое приложение отзывчивым
import { css } from 'styled-components';
export default {
smallScreen: (...args: any) => css`
@media (max-width: 600px) {
${css(...args)}
}
`,
}
В другом компоненте реакции я хочу использовать определенный выше метод для написания CSS, который применяется на маленьких экранах.
const SideNavWrapper = styled.article`
background: red; // this works
width: ${props => props.expanded ? '260px' : '80px'}; // this works
${media.smallScreen({
background: 'yellow', // this works
width: `${props => props.expanded ? '100%' : '20px'}`, // this doesn't work. props is undefined.
})}
`;
В зависимости от props.expanded я хочу переключить ширину SideNavWrapper. Однако это не работает на небольших экранах.
Цвет фона меняется, как и ожидалось, но не ширина. При отладке я понял, что реквизит не определен. Любые идеи, что мне не хватает? Большое спасибо!
Ответы 2
Вы бы попробовали:
${props => {
return (media.smallScreen({
background: 'yellow',
width: `${props.expanded ? '100%' : '20px'}`,
}))
}}
@Ishita рад помочь. Нужен ли строковый литерал? Я думаю, (props.expanded ? '100%' : '20px') было бы более элегантно.
Согласованный. Строковый литерал был там только потому, что я скопировал эту строку сверху.
Другой способ, который вы могли бы использовать и, на мой взгляд, был бы намного чище для чтения и, следовательно, удобным для обслуживания, заключается в следующем:
const getCorrectWidth = ({ expanded }) => (
expanded
? 260
: 80
);
const getCorrectSmallWidth = ({ expanded }) => (
expanded
? '100%'
: '20px'
);
const SideNavWrapper = styled.article`
background: red;
width: ${getCorrectWidth}px;
${media.smallScreen`
background: yellow;
width: ${getCorrectSmallWidth}
`}
`;
Вышеупомянутое имеет четкие функции, которые сообщают разработчику, что он делает. Синтаксис тоже выглядит чистым.
Это работает. Большое спасибо. Однако ваше решение требует незначительного исправления синтаксиса. ${props => { return (media.smallScreen({ background: 'желтый', width:
${props.expanded ? '100%' : '20px'}, })) } }