Как обрабатывать условные операторы в стилизованном компоненте
Я добавляю поддержку темы для своего приложения с помощью стилизованных компонентов и ThemeProvider. Рассматриваемый компонент уже имел условное отображение стиля на основе реквизита. Когда я представляю тему, я не могу получить нужные мне стили для свойства границы. Их просто игнорируют. Если заменить их шестнадцатеричным значением, я увижу границу.
const Wrapper = styled.div`
position: relative;
width: 100px !important;
height: 130px !important;
opacity: ${({ isDragging }) => (isDragging ? 0.25 : 1)};
border: ${({ isSelected }) =>
isSelected
? `1px solid ${props => props.theme.CYAN}`
: `1px solid ${props => new Color(props.theme.CYAN).alpha(0.25)}`};
text-align: center;
padding: 10px !important;
margin: 4px !important;
box-shadow: none;
border-radius: 0;
cursor: pointer;
box-sizing: border-box;
background-color: ${({ isSelected }) =>
isSelected
? props => new Color(props.theme.CYAN).alpha(0.25)
: props => props.theme.DARK} !important;
& :hover {
border-color: ${props => props.theme.CYAN};
box-shadow: none;
}
}
<Wrapper
isDragging = {isDragging}
isSelected = {isSelected}
onClick = {onClick}
className = "daily-item"
>
export const CLASSIC_THEME = {
DARK: '#282a2b',
LIGHT: 'white',
CYAN: '#2edaf4',
GREEN: '#26fba3',
PURPLE: '#6f24bd',
PINK: '#dd2df4',
LIGHT_PURPLE: '#6d47f6',
RED: '#f42d61',
GREY: '#a6a6a6',
};
export const PRIMARY_THEME = {
DARK: '#1f2630',
LIGHT: '#EEEEFF',
CYAN: '#BFC0C0',
GREEN: '#9FB4C7',
PURPLE: '#6f24bd',
PINK: '#C89047',
LIGHT_PURPLE: '#6d47f6',
RED: '#f42d61',
GREY: '#a6a6a6',
};
Я знаю, что эти ключи не точно описывают шестнадцатеричное значение :) Я собираюсь добраться до этого
Я добавил ThemeProvider
Извините, я имел в виду, можете ли вы поделиться фактическими объектами темы, на которые, например, ссылается CLASSIC_THEME. Вы уверены, что там есть свойство под названием CYAN?
ок, обновил пост
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
как выглядит props.theme.CYAN? Как вы сказали, если вы замените его на HEX, он сработает, что наводит меня на мысль, что проблема может быть не условной, а new Color(props.theme.CYAN).alpha(0.25).
ну, этот шаблон работает везде, где я его использую, если только он не является частью такого условного выражения. Вот что я получаю, когда регистрирую это ``` ƒ (реквизит) { return props.theme.CYAN; }```
Чтобы было ясно, это то, что я получаю в компонентах, которые работают правильно, и этот компонент, о котором я спрашиваю
Можете ли вы подтвердить, что «новый цвет» — это внешняя библиотека? (Это может быть что-то, с чем я не знаком в JS). При этом значение props.theme.CYAN может быть несовместимо с этой библиотекой. можете ли вы записать значение в консоль? и подскажите что это? : 1px solid ${props =>console.info('color', props.theme.CYAN) || new Color(props.theme.CYAN).alpha(0.25)}};
Цвет — это внешняя библиотека. Я удалил new Color(... и заменил на props => props.theme.CYAN и получил тот же результат. Я не думаю, что это проблема :(
Проблема может быть объектом, который вы передаете ему, как сказано выше. props.theme.CYAN может быть недопустимым значением цвета. Можете ли вы props.theme выйти из системы, чтобы мы знали, с какими данными мы работаем?
Это определенно там. такой код props => new Color(props.theme.CYAN).alpha(0.25) и этот props => props.theme.CYAN работает, как и ожидалось, во всем приложении. Это просто не работает в контексте условного, как это
Можете ли вы на 100% подтвердить это с помощью console.info? Это может быть глупо, но устранение любых сомнений в подобных ситуациях приведет к ответу.
Кроме того, я не уверен, как эффективно регистрировать props.theme. Он просто возвращает: ƒ (props) { return props.theme; }
заменить 1px solid ${props => new Color(props.theme.CYAN).alpha(0.25)} на 1px solid ${props => console.info('props.theme.CYAN', props.theme.CYAN) || new Color(props.theme.CYAN).alpha(0.25)}
Вы используете помеченный литерал шаблона в стилизованном div, вот как вы получаете ссылку на реквизит. Однако в вашем подходе я заметил, что вы деконструируете свойство isSelected из реквизита, а затем пытаетесь использовать реквизиты, добавляя внутрь еще одну функцию стрелки, которая не является частью тегового литерала шаблона. Я предполагаю, что это не работает. Попробуйте следующее:
const Wrapper = styled.div`
position: relative;
width: 100px !important;
height: 130px !important;
opacity: ${({ isDragging }) => (isDragging ? 0.25 : 1)};
border: ${props =>
props.isSelected
? `1px solid ${props.theme.CYAN}`
: `1px solid ${new Color(props.theme.CYAN).alpha(0.25)}`};
text-align: center;
padding: 10px !important;
margin: 4px !important;
box-shadow: none;
border-radius: 0;
cursor: pointer;
box-sizing: border-box;
background-color: ${props =>
props.isSelected
? new Color(props.theme.CYAN).alpha(0.25)
: props.theme.DARK} !important;
& :hover {
border-color: ${props => props.theme.CYAN};
box-shadow: none;
}
`;
Работал! Спасибо большое
Вы можете поделиться кодом ThemeProvider?