Question

我想设置元素的样式：

this.refs.element.style = {
    ...this.props.style,
    background: 'blue',
};

但显然你不能使用一个对象来设置ref的样式。我必须使用;分隔prop:values

的CSS样式字符串

我知道大多数人会在渲染功能中设置样式，但出于性能原因，我不能重复渲染。

Answer 1

我刚抓取Object.entries并以分号缩小

const style = {
  ...this.props.style,
  background: 'blue',
};

const styleString = (
  Object.entries(style).reduce((styleString, [propName, propValue]) => {
    return `${styleString}${propName}:${propValue};`;
  }, '')
);

它将background:'blue',上传到background:blue;，适用于CSS

用短划线小写字母替换任何大写字母

propName = propName.replace(/([A-Z])/g, matches => `-${matches[0].toLowerCase()}`);

Answer 2

此解决方案可在IE中运行，并处理诸如backgroundColor之类的camelCase键

const style = {
    width: '1px',
    height: '1px',
    backgroundColor: 'red',
    transform: 'rotateZ(45deg)',
}
const styleToString = (style) => {
    return Object.keys(style).reduce((acc, key) => (
        acc + key.split(/(?=[A-Z])/).join('-').toLowerCase() + ':' + style[key] + ';'
    ), '');
};

console.log(styleToString(style));
// output - "width:1px;height:1px;background-color:red;transform:rotateZ(45deg);"

Answer 3

使用https://www.npmjs.com/package/json-to-css。请注意，它不会在最后一个属性中添加分号来修复它，您可以使用https://www.npmjs.com/package/cssbeautify美化它例子


    const cssbeautify = require('cssbeautify')

    const Css = require('json-to-css')

    const json = {
        "h1": {
            "font-size": "18vw",
            "color": "#f00"
        },
        ".btn": {
            "font-size": "18vw",
            "color": "#f00"
        }
    }


    const r = Css.of(json)
    console.log(r)

    const beautified = cssbeautify(r, {
        autosemicolon: true
    })

    console.log(beautified)

结果


  console.log src/utils/playground/index.spec.ts:22 // json-to-css
    h1{font-size:18vw;color:#f00}
    .btn{font-size:18vw;color:#f00}

  console.log src/utils/playground/index.spec.ts:29 // cssbeautify
    h1 {
        font-size: 18vw;
        color: #f00;
    }
    
    .btn {
        font-size: 18vw;
        color: #f00;
    }

Answer 4

加入@Artem Bochkarev 的精彩回答

我正在添加一个片段来进行相反的转换（字符串到对象），这对在这里绊倒的人可能会派上用场

const style = {
  width: '1px',
  height: '1px',
  backgroundColor: 'red',
  transform: 'rotateZ(45deg)',
};
const styleToString = (style) => {
  return Object.keys(style).reduce((acc, key) => (
    acc + key.split(/(?=[A-Z])/).join('-').toLowerCase() + ':' + style[key] + ';'
  ), '');
};
const stringToStyle = (style) => {
  const styles = {};
  style.split(';').forEach((s) => {
    const parts = s.split(':', 2);
    if (parts.length > 1) {
      styles[parts[0].trim().replace(/-([a-z])/ig, (_, l) => l.toUpperCase())] = parts[1].trim();
    }
  });
  return styles;
};

console.log(styleToString(style));
// output - "width:1px;height:1px;background-color:red;transform:rotateZ(45deg);"

console.log(stringToStyle(styleToString(style)));

Answer 5

create or replace function ufn_get_sector_rating (l_rating_id in number) return char is retval char(1) := 'N'; begin select max('Y') into retval from ic_rating where rating_id = l_rating_id; return retval; exception when no_data_found then return retval; end;中的css功能可以为您提供帮助在此处检查more info

@material-ui/system

如何将JSON样式对象转换为CSS字符串？

5 个答案: