Add a custom theme in React | Mapbox Search JS

This example makes use of the Control Theme API to theme a Search Box React component with a "retro" style.

React


import React from 'react';
import { SearchBox } from '@mapbox/search-js-react';

// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN'

const MapboxExample = () => {

    // Our retro theme!
    const theme = {
        variables: {
            unitHeader: '28px',
            fontFamily: '"MS Sans Serif",Tahoma,Verdana,Segoe,sans-serif',
            border: '2px solid',
            borderRadius: '0',
            boxShadow: '0 0 1px 1px rgba(0,0,0,0.1)',
            colorText: '#212529',
            colorPrimary: '#08216b',
            colorSecondary: '#424242',
            colorBackground: 'silver'
        },
        cssText: `
            .Results,
            .SearchBox {
                border-top-color:#fff;
                border-left-color:#fff;
                border-right-color:#333;
                border-bottom-color:#333;
            }
            .Input:focus {
                background-color: lightskyblue;
            }
        `,
    };

    return (
        <div>
            <h3 className="txt-l mb12 txt-bold">Start typing for a custom theme!</h3>
            <SearchBox
                accessToken={ACCESS_TOKEN}
                theme={theme}
            />    
        </div>
    )
}

export default MapboxExample;

このexampleは役に立ちましたか？