如何让 JSX 中定义的 HTML 元素接受属性？

Question

我在反应组件中使用 JSX 返回 HTML。但是，这些标签不会作用于 JSX 中提供给它们的属性吗？请检查下面的代码sn-p：

function NavigationBar() {
    return (
     <div>
        <HeadBar position="static" alignItems='center' >
            <Toolbar className="toolbar" align='center' color='green'>
                <Typography variant="h6" color="green" align='center'> 
                    Welcome !!!
                </Typography>
            </Toolbar>
        </HeadBar>
    </div>
    )
}

在上面返回 JSX 的函数（组件）中，我看到了所有的默认值。属性“align”、“color”、“alignItems”似乎没有任何影响。任何帮助将不胜感激。

Answer 1

你错过了>。

function NavigationBar() {
    return (
     <div>
        <HeadBar>
            <Toolbar className="toolbar">
                <Typography variant="h6" style={{ alignItems: "center", color: "green" }}> 
                    Welcome !!!
                </Typography>
            </Toolbar>
        </HeadBar>
    </div>
    )
}