Есть ли способ создать эмоциональную тему без «стилизации»?
С emotion (https://github.com/emotion-js/emotion) я знаю, что могу создавать темы с css и styled вместе с чем-то вроде:
const carouselCss = ({ theme }) => css`
.. css properties etc
`;
const CarouselDiv = styled('div')`
${carouselCss};
`;
Затем в JSX:
<ThemeProvider theme = {{ stuff: 'blah' }}>
<CarouselDiv>
..
</CarouselDiv>
</ThemeProvider>
Но есть ли какой-либо элегантный способ темы только с css - предпочитаю не использовать компонентный styles, потому что я хочу сохранить семантические элементы html в JSX (также иметь массивную базу кода, и его легче перейти от sass к эмоциям без использования styled )
Я знаю, что могу сделать что-то вроде:
const carouselCss = (theme) => css`
.. css properties etc
`;
затем jsx:
<div className = {carouselCss(this.props.theme)}>
..
</div>
Но это означает постоянную передачу свойства темы из компонента, что немного громоздко.
Есть лучший способ это сделать ? Как-нибудь обернуть css чем-нибудь, чтобы в него были введены тематические вары?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать тема HoC. Но если вас беспокоит передача поддержки на слайдер, этот HoC в основном делает то же самое, то есть вводит theme в this.props.theme.
Лично я бы использовал ThemeProvider API, если это возможно, возможно, с темой функционального стиля, как указано в документации:
// function-style theme; note that if multiple <ThemeProvider> are used,
// the parent theme will be passed as a function argument
const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' });
Может быть, вы можете попробовать что-нибудь в этом роде: codeandbox.io/s/n93lxvq7m0 (разветвлено из живой демонстрации эмоций). Объект темы доступен внутри getBorderProps
ThemeProvider даст вам это. Вот пример с показанными вариантами styled и css:
/** @jsx jsx */
import { jsx } from '@emotion/core'
import styled from '@emotion/styled'
import { ThemeProvider } from 'emotion-theming'
const theme = {
colors: {
primary: 'hotpink'
}
}
const SomeText = styled.div`
color: ${props => props.theme.colors.primary};
`
render(
<ThemeProvider theme = {theme}>
<SomeText>some text</SomeText>
<div css = {theme => ({ color: theme.colors.primary })}>
some other text
</div>
</ThemeProvider>
)
У меня вопрос о том, как делать темы без @emotion/styled.
@Marty В этом примере я предоставил вам 2 варианта: один использует стили, а другой использует css prop непосредственно в div: <div css = {theme => css`color: ${theme.colors.primary}`}>I am styled!</div>
Ага, правильно - это поддерживалось, начиная с эмоции 10 (когда я размещал статью, была только эмоция 9)
withThemeтребует, чтобы вы передали компонент реакции, мне нужно сделать буквальную темуcssосведомленной. МетодadjustedThemeиспользуетstyled, чего я стараюсь избегать, если это возможно.