在 Shopify 嵌入式应用中设置 TopBar 背景颜色

问题描述

我一直在尝试按照此处文档中的说明更改 TopBar 背景颜色：https://polaris.shopify.com/components/structure/app-provider/theme 无济于事。

我在主题常量中添加了颜色，但在呈现的页面中没有变化。

我错过了什么吗？有什么想法吗？

这是我使用的代码：

import React,{useCallback,useState} from 'react';
import {AppProvider,Avatar,Icon,VisuallyHidden,ActionList,Frame,TopBar} from '@shopify/polaris';
import {ArrowLeftMinor,QuestionMarkMajor} from '@shopify/polaris-icons';

export default function TopBarExample() {
    const [isUserMenuOpen,setIsUserMenuOpen] = useState(false);
    const [isSecondaryMenuOpen,setIsSecondaryMenuOpen] = useState(false);
    const [isSearchActive,setIsSearchActive] = useState(false);
    const [searchValue,setSearchValue] = useState('');

    const toggleIsUserMenuOpen = useCallback(
        () => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),[],);

    const toggleIsSecondaryMenuOpen = useCallback(
        () => setIsSecondaryMenuOpen((isSecondaryMenuOpen) => !isSecondaryMenuOpen),);

    const handleSearchResultsdismiss = useCallback(() => {
        setIsSearchActive(false);
        setSearchValue('');
    },[]);

    const handleSearchChange = useCallback((value) => {
        setSearchValue(value);
        setIsSearchActive(value.length > 0);
    },[]);

    const handleNavigationToggle = useCallback(() => {
        console.log('toggle navigation visibility');
    },[]);

    const theme = {
        colors: {
            surface: '#FFFFFF',onSurface: '#212B36',interactive: '#da94a4',secondary: '#da94a4',primary: '#da94a4',critical: '#da94a4',warning: '#da94a4',highlight: '#da94a4',success: '#da94a4',decorative: '#da94a4',background: '#da94a4'
        },logo: {
            width: 124,topBarSource:
                'https://cdn.ad360.media/shopify/images/ad360_black_horizontal_300px.png',url: 'https://www.ad360.media',accessibilityLabel: 'Ad360 Shopify App'
        },};

    const userMenuMarkup = (
        <TopBar.UserMenu
            actions={[
                {
                    items: [{content: 'Back to Shopify',icon: ArrowLeftMinor}],},{
                    items: [{content: 'Community forums'}],]}
            name="Menadex"
            detail="Ad360"
            initials="D"
            open={isUserMenuOpen}
            onToggle={toggleIsUserMenuOpen}
        />
    );

    const searchResultsMarkup = (
        <ActionList
            items={[{content: 'Shopify help center'},{content: 'Community forums'}]}
        />
    );

    const searchFieldMarkup = (
        <TopBar.SearchField
            onChange={handleSearchChange}
            value={searchValue}
            placeholder="Search"
            showFocusBorder
        />
    );

    const secondaryMenuMarkup = (
        <TopBar.Menu
            activatorContent={
                <span>
          <Icon source={QuestionMarkMajor} />
          <VisuallyHidden>Secondary menu</VisuallyHidden>
        </span>
            }
            open={isSecondaryMenuOpen}
            onopen={toggleIsSecondaryMenuOpen}
            onClose={toggleIsSecondaryMenuOpen}
            actions={[
                {
                    items: [{content: 'Community forums'}],]}
        />
    );

    const topBarMarkup = (
        <TopBar
            showNavigationToggle
            userMenu={userMenuMarkup}
            secondaryMenu={secondaryMenuMarkup}
            searchResultsVisible={isSearchActive}
            searchField={searchFieldMarkup}
            searchResults={searchResultsMarkup}
            onSearchResultsdismiss={handleSearchResultsdismiss}
            onNavigationToggle={handleNavigationToggle}
        />
    );

    return (
        <div style={{height: '250px'}}>
            <AppProvider
                theme={theme}
                i18n={{
                    Polaris: {
                        Avatar: {
                            label: 'Avatar',labelWithInitials: 'Avatar with initials {initials}',Frame: {skipToContent: 'Skip to content'},TopBar: {
                            toggleMenuLabel: 'Toggle menu',SearchField: {
                                clearButtonLabel: 'Clear',search: 'Search',}}
            >
                <Frame topBar={topBarMarkup} />
            </AppProvider>
        </div>
    );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）