I am using Chakra-UI’s styling conventions to try to style the background color of the header. The styles for the header is located in Header.js:
export default {
baseStyle: {
container: {
minWidth: 'xs',
width: 'full',
boxShadow: 'base',
backgroundColor: 'blue'
},
content: {
maxWidth: 'container.xxxl',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: [4, 4, 6, 8],
paddingRight: [4, 4, 6, 8],
paddingTop: [1, 1, 2, 4],
paddingBottom: [3, 3, 2, 4]
},
},
parts: ['container', 'content', 'searchContainer', 'bodyContainer', 'logo', 'icons', 'signout']
}
As you can see, I tried changing the background color to blue, but it doesn’t do anything. See below for the code in the Header file for the markup:
import React, {useRef, useState} from 'react'
import PropTypes from 'prop-types'
import {useIntl} from 'react-intl'
import {
useMultiStyleConfig,
Box,
Flex,
IconButton,
Badge,
Button,
Popover,
PopoverHeader,
PopoverTrigger,
PopoverContent,
PopoverBody,
PopoverFooter,
PopoverArrow,
Stack,
Text,
Divider,
useDisclosure,
useMediaQuery
} from '@salesforce/retail-react-app/app/components/shared/ui'
import {AuthHelpers, useAuthHelper, useCustomerType} from '@salesforce/commerce-sdk-react'
import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
import Link from '@salesforce/retail-react-app/app/components/link'
import withRegistration from '@salesforce/retail-react-app/app/components/with-registration'
import {
AccountIcon,
BrandLogo,
BasketIcon,
HamburgerIcon,
ChevronDownIcon,
HeartIcon,
SignoutIcon,
SearchIcon
} from '@salesforce/retail-react-app/app/components/icons'
import {navLinks, messages} from '@salesforce/retail-react-app/app/pages/account/constant'
import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
const IconButtonWithRegistration = withRegistration(IconButton)
const Header = ({
children,
onMenuClick = noop,
onSearchClick = noop,
onMyAccountClick = noop,
onLogoClick = noop,
onMyCartClick = noop,
onMiniCartClick = noop,
onWishlistClick = noop,
...props
}) => {
const intl = useIntl()
const {
derivedData: {totalItems},
data: basket
} = useCurrentBasket()
const {isRegistered} = useCustomerType()
const logout = useAuthHelper(AuthHelpers.Logout)
const navigate = useNavigation()
const {
getButtonProps: getAccountMenuButtonProps,
getDisclosureProps: getAccountMenuDisclosureProps,
isOpen: isAccountMenuOpen,
onClose: onAccountMenuClose,
onOpen: onAccountMenuOpen
} = useDisclosure()
const [isDesktop] = useMediaQuery('(min-width: 992px)')
const [showLoading, setShowLoading] = useState(false)
// tracking if users enter the popover Content,
// so we can decide whether to close the menu when users leave account icons
const hasEnterPopoverContent = useRef()
const styles = useMultiStyleConfig('Header')
const onSignoutClick = async () => {
setShowLoading(true)
await logout.mutateAsync()
navigate('/login')
setShowLoading(false)
}
const handleIconsMouseLeave = () => {
// don't close the menu if users enter the popover content
setTimeout(() => {
if (!hasEnterPopoverContent.current) onAccountMenuClose()
}, 100)
}
return (
<Box {...styles.container} {...props}>
<Box {...styles.content}>
</Box>
</Box>
)
}
Header.propTypes = {
children: PropTypes.node,
onMenuClick: PropTypes.func,
onLogoClick: PropTypes.func,
onSearchClick: PropTypes.func,
onMyAccountClick: PropTypes.func,
onWishlistClick: PropTypes.func,
onMyCartClick: PropTypes.func,
onMiniCartClick: PropTypes.func,
searchInputRef: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({current: PropTypes.elementType})
])
}
export default Header
I tried things like inline styles, which work, but that isn’t ideal when I have an external styles file for this component.
