Селекторы атрибутов в эмоциях - PullRequest
Новая
       12

Селекторы атрибутов в эмоциях

1 голос
/ 02 апреля 2019

Следующий код настраивает google maps DrawingManager курсор с перекрестием. Это работает, но я хотел бы иметь возможность передавать курсор SVG в качестве реквизита. Я пытался заставить его работать, используя эмоции, но не смог найти ничего похожего в документах по эмоциям, и мои попытки потерпели неудачу. Можно ли это сделать в эмоциях?

Код: на самом деле здесь только две соответствующие строки (указаны) - остальное дано для контекста. 


import React, { useEffect, useContext } from 'react'
import { GoogleMapContext, MapBox } from '@googlemap-react/core'
import ThemeSwitcher from './theme-switcher'
import styles from './styles/styles'
import './map.css'   <--------------------------------------------------

export default function Map(props) {
    const { state: { map } } = useContext(GoogleMapContext);
    useEffect(() => map && map.setOptions({ draggableCursor: props.cursor }));
    return <>
        <MapBox
            className='crosshair-cursor'          <---------------------
            apiKey={process.env.REACT_APP_GMAPS}
            opts={{
                center: { lat: -37.815018, lng: 144.946014 },
                zoom: 11,
                styles: styles[localStorage.getItem('mapTheme')],
            }}
            useDrawing
            useGeometry
            useGoogleApi
            onClick={props.onClick}
            onRightClick={props.onRightClick}
            LoadingComponent={null}
        />
            <ThemeSwitcher bindingPosition='TOP_LEFT' map={map} />
            {props.children}
    </>
}

map.css: 

.crosshair-cursor [style*='crosshair'] {
    cursor: url("https://i.stack.imgur.com/mA4e2.jpg?s=48&g=1")24 24, crosshair !important;
  }

Моя попытка: 

import React, { useEffect, useContext } from 'react'
import { GoogleMapContext, MapBox } from '@googlemap-react/core'
import ThemeSwitcher from './theme-switcher'
import styles from './styles/styles'
import './map.css'
import {css} from '@emotion/core'

const cursor = css`[style*='crosshair'] {
    cursor: url("https://i.stack.imgur.com/mA4e2.jpg?s=48&g=1")24 24, crosshair !important;
}`

export default function Map(props) {
    const { state: { map } } = useContext(GoogleMapContext);
    useEffect(() => map && map.setOptions({ draggableCursor: props.cursor }));
    return <>
        <MapBox
            // className='crosshair-cursor'
            css={cursor}
            apiKey={process.env.REACT_APP_GMAPS}
            opts={{
                center: { lat: -37.815018, lng: 144.946014 },
                zoom: 11,
                styles: styles[localStorage.getItem('mapTheme')],
            }}
            useDrawing
            useGeometry
            useGoogleApi
            onClick={props.onClick}
            onRightClick={props.onRightClick}
            LoadingComponent={null}
        />
            <ThemeSwitcher bindingPosition='TOP_LEFT' map={map} />
            {props.children}
    </>
}
...