反应：将CSSPProperties转换为样式化组件

我有一个以下格式的对象：

let样式：React.cssprroperties | object={
marginLeft:'0'，
边界半径：“20px”，
显示：“flex”，
为内容辩护：“中心”，
}

我需要将React CSSP属性转换为相应的字符串格式，例如：

让字符串\u样式：字符串=`{
左边距：0；
边界半径：20px；
显示器：flex；
证明内容：中心；
}`

因为我找不到一个具体的语法来编写css，比如

：hover

，

：：before

，

：：before:hover

内联，所以现在将其用作样式化组件，同时将CSSProperties对象保留下来以备将来导入

不雅观的是，我硬编码了转换方法

    deQuote(dict:object):string{
        return JSON.stringify(dict).replace(/['"]+/g, '');
    }
    // passin: {marginLeft: '0', borderRadius: '20px'} 
    // return: `{marginLeft: 0, borderRadius: 20px}`

    deBraces(str:string):string{
        return str.substring(1, str.length-1);
    }
    // passin: `{marginLeft: 0, borderRadius: 20px}`
    // return: `marginLeft: 0, borderRadius: 20px`

    deComma(str:string):string{
        return str.split(',').join(';');
    }
    // passin: `marginLeft: 0, borderRadius: 20px`
    // return: `marginLeft: 0; borderRadius: 20px`

    deBase(dict:object):string{
        return deComma(deBraces(deQuote(dict)));
    }
    // passin: {marginLeft: '0', borderRadius: '20px'} 
    // return: `marginLeft: 0; borderRadius: 20px`
    

但这是一个棘手的部分，它需要很多努力才能转化

    marginLeft -> margin-left

---

通过定制功能解决， 但是，如果有更好的方法将React.CSSProperties转换为样式化的组件字符串，请告诉我。

您可以使用它来解决这个确切的问题

这里有一个例子

从“lodash.kebabCase”导入烤肉串；
烤肉串（foobar）；
//=>“富吧”
烤肉串（fooBar）；
//=>“富吧”
烤肉串；
//=>“富吧”

为什么需要将对象转换为字符串

您可以通过使用

Object.keys

和

Array.reduce

方法映射并构建最终字符串

const style={
marginLeft:'0'，
边界半径：“20px”，
显示：“flex”，
为内容辩护：“中心”，
}
const finalResult=Object.keys（样式）.reduce（（累加器，键）=>{
//将钥匙从camelCase转换为Kebbab case
const cssKey=烤肉串（钥匙）
//删除“值中的”
常量cssValue=style[key]。替换（“，”）
//建立结果
//如果需要，您可以打断该行，为其添加缩进
返回`${acculator}${cssKey}:${cssValue}`
}, '')

如果您不想使用kebabCase库，您可以使用一个简单的正则表达式来查找所有大写字母，并在前面加上

-

，将其转换为小写字母

const regex=new RegExp（/[A-Z]/g）
常量kebabCase=（str）=>str.replace（regex，v=>`-${v.toLowerCase（）}`）

？我有一个类似的方法，我真的很期待一个更简单的解决方案

deCap（str:string）：string{return str.split（“”）.map（lt=>lt.match（/[A-Z]/）&<？`-${lt.toLowerCase（）}:lt）。join（“”）；}

感谢您的建议。

    CSSPropertiesToComponent(dict:React.CSSProperties){
        let str = '';
        for(const [key, value] of Object.entries(dict)){
            let clo = '';
            key.split('').forEach(lt=>{
                if(lt.toUpperCase() === lt){
                    clo += '-' + lt.toLowerCase();
                }else{
                    clo += lt;
                }
            });
            str += clo + ':' + value + ';';
        }
        return str;
    }