我怎样才能将这段代码注入到一个对象值中？

Question

我是否可以将 headstyles 对象添加到 headText 对象中？我已经将 headStyles 对象注入到 headConfig

从“@material-ui/core”导入{makeStyles}

const headStyles = {
    backgroundColor:'green',
    borderRadius:10,
    padding:7
}

// CSS Styles
const useStyles = makeStyles( theme => ({ 

box: {
    position: 'absolute',
    width:'100vw',
    display:'grid',
    textAlign:'center',
    alignItems:'center',
    marginTop:'10vh',
    color:'white'
},

avatar: {
    justifySelf:'center',
    width: theme.spacing(19),
    height: theme.spacing(19),
    margin: theme.spacing(6),
},
headText: {
    position: 'relative',
    color: '#aaa',
    zIndex:1,
    top:'10vh',
    // TRYING TO ADD (headStyles) IN HERE SOMEHOW  <<<<<<<<<<<<<<<---------
},
headConfig: headStyles
}))

Answer 1

我不太确定我理解你的问题。我假设您想合并这两个对象。如果是这种情况，您可以使用 (...) 传播运算符。

const a = {a: 2}
const b = {b: 3, ...a} // here we add all the elements of a
console.log(b) // {b: 3, a: 2}

所以在你的例子中你应该能够做到：

headText: {
    position: 'relative',
    color: '#aaa',
    zIndex:1,
    top:'10vh',
    ...headStyles
},

Answer 2

您可以使用对象展开运算符(...)。例如

const headStyles = {
    backgroundColor:'green',
    borderRadius:10,
    padding:7
}

const useStyles = makeStyles(theme => ({ 
    box: {
        position: 'absolute',
        width:'100vw',
        display:'grid',
        textAlign:'center',
        alignItems:'center',
        marginTop:'10vh',
        color:'white'
    },
    avatar: {
        justifySelf:'center',
        width: theme.spacing(19),
        height: theme.spacing(19),
        margin: theme.spacing(6),
    },
    headText: {
        position: 'relative',
        color: '#aaa',
        zIndex:1,
        top:'10vh',
        ...headStyles // using object spread operator to merge headStyles
    },
    headConfig: headStyles
}))

我怎样才能将这段代码注入到一个对象值中？

How can i inject this piece of code in to a object value?

javascript

object

key-value

reactjs

material-ui