У нас есть реактивный проект, который использует стилизованные компоненты, а ThemeProvider предоставляет объект темы, на который должны ссылаться все компоненты.В этом проекте у нас есть листовка, и мы добавляем к ней компоненты React в виде маркеров, используя ReactDOMServer.renderToString
.Когда он пытается получить доступ к theme
в стилях компонента, theme
не определено.При добавлении компонента обычным способом он работает правильно.
Я могу заставить его работать, вручную импортируя объект темы в компонент карты и передавая объект темы компоненту маркера как свойство, но это кажется немного странным - было бы лучше выяснить, почему контекст теряется.
В компоненте карты:
const nodeContents = (
<NodeIcon_svg />
);
const nodeIcon = Leaflet.divIcon({html: ReactDOMServer.renderToString(nodeContents),
iconSize: [60, 60],
iconAnchor: [30, 30]
});
Leaflet.marker(latLng, { icon: nodeIcon }).addTo(_mapLayer);
В стилях компонента NodeIcon (тема содержитобъект с несколькими именованными цветами):
export const NodeIcon_svg = styled.svg`
polygon {
stroke: ${({ theme }) => theme.colors.blue1)};
fill: transparent;
}
`;
Если я добавлю это к компоненту карты:
import themeColors from '../../theme';
И добавим эту строку туда, где мы добавляем NodeIcon:
theme={themeColors}
Работает.Но это своего рода хак - он должен иметь возможность использовать тему.
Что должно произойти (и то, что происходит, когда компонент NodeIcon используется в другом месте): он находит цвет в theme.colors
и применяет егона обводку многоугольника.
Что происходит, так это то, что страница умирает с ошибкой js в строке, в которой она пытается получить доступ к theme.colors.blue1
, говоря, что она не может быть прочитана, поскольку объектне определено.Почему-то theme
не входит в компонент, возможно, из-за использования ReactDOMServer.renderToString
.Любая идея, как сделать theme
доступным для компонента маркера без огромной реструктуризации кода (поскольку у нас уже есть работающее, но неудобное решение)?