React Styled 组件和 css，h1 不显示

Question

我正在尝试设计一个谷歌地图组件的样式，并添加一个带有h1的标题。在地图上添加标题背景是有效的，但添加h1是无效的，无论我如何格式化它的位置。

标题CSS

export const HeaderBackground = styled.div`
top: 0px;
left: 0px;
right: 0px;
height: 54px;
background-color: #ffffff;
`;
export const Header = styled.h1`
font-family: ${fontFamilies.SourceSansPro};
text-align: center;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 15px;
color: #009cde;
text-shadow: 6px 6px 24px #24415d29;
`;

地图的CSS

export const ProcessorMapContainer = styled.div`
position: absolute;
top: 54px;
left: 0px;
right: 0px;
bottom: 0px;
`;

主要地图组件：

const ProcessorMap = () => {
const dispatch = useDispatch();
const defaultZoom = useSelector(getMapZoom);
const defaultCenter = useSelector(getMapLocation);
const markerList = useSelector(getFarmLocations);
// const userName = useSelector(getUserName)
const props = {
defaultZoom,
defaultCenter,
markerList,
};

useEffect(() => {
dispatch(getFarmLocationAction());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<ProcessorMapContainer>
<HeaderBackground></HeaderBackground>
<Header></Header>
<Map {...props} />
</ProcessorMapContainer>
);
};

Answer 1

您遇到的问题是您的标签是空的，这就是呈现：

<h1></h1>

所以，只需在<Header>中添加一些内容。

const name = 'Abraham';
return (
<ProcessorMapContainer>
<HeaderBackground />
<Header>{name}</Header>
<Map {...props} />
</ProcessorMapContainer>
);