在React中使用内联样式和纯CSS字符串

Use inline style in React with plain CSS string

本文关键字：样式 CSS 字符串 React      更新时间：2023-09-26

我正在ReactJS中重写基于AngularJS的现有应用程序。在应用程序中，用户可以提供一个CSS样式字符串来设置某些元素的样式。在AngularJS中，这是没有问题的，我只是将'style'属性设置为给定的字符串。在ReactJS中，我不能再这样做了，因为ReactJS需要一个样式对象。我不想改变应用程序的行为，也不想要求用户现在提供一个与ReactJS兼容的样式对象。是否有任何方法在ReactJS只是使用一个普通的CSS样式字符串来设置元素的样式?

您可以在componentDidMount和componentDidUpdate中使用setAttribute('style', ...)设置样式字符串

您只需要能够获得对React创建的DOM节点的引用。你可以使用refs

这里有一个例子。这个组件接受一个styleString道具，并将其设置为它所呈现的<div/>的样式。

import React from 'react';
class StyledDiv extends React.Component {
  componentDidMount() {
    this.refs.theDiv.setAttribute('style', this.props.styleString);
  }
  componentDidUpdate() {
    this.refs.theDiv.setAttribute('style', this.props.styleString);
  }
  render() {
    return (
      <div ref="theDiv" />
    );
  }
}
StyledDiv.propTypes = {
  styleString: React.PropTypes.string,
};
export default StyledDiv;

这是我为试剂发现的一个hack，但我相信它同样适用于原始反应版本>= 16(其中自定义dom属性被传递)。只需使用大写的STYLE属性，而不是小写的style，这是由React拦截。

如果你用的是styled-components，那就不要看其他答案了。使用v4，您可以直接将字符串传递给css prop到任何html标签或样式组件。

<div css="margin-top: 4px;">
Yes it works just like that :).
</div>

猜猜看，你甚至不需要导入styled-components。所有你需要做的就是添加这个babel插件。它会把任何带有css prop的元素变成有样式的组件。

做了一个模块来处理这个，叫做Style。这很简单，我想我们都应该回到简单地写CSS。

将样式字符串作为prop传入。

npm install style-it --save

函数语法 (JSFIDDLE)

import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';
class Intro extends React.Component {
  render() {
    return Style.it(
      this.props.cssText,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}
ReactDOM.render(
  <Intro cssText=".intro { color: red; }"/>,
  document.getElementById('container')
);

JSX语法 (JSFIDDLE)

import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';
class Intro extends React.Component {
  render() {
    return (
      <Style>
      {this.props.cssText}
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    </Style>
  }
}
export default Intro;
ReactDOM.render(
  <Intro cssText=".intro { color: red; }"/>,
  document.getElementById('container')
);

补充Taylor michels的回答

function CSSstring(string) {
  const css_json = `{"${string
    .replace(/; /g, '", "')
    .replace(/: /g, '": "')
    .replace(";", "")}"}`;
  const obj = JSON.parse(css_json);
  const keyValues = Object.keys(obj).map((key) => {
    var camelCased = key.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
    return { [camelCased]: obj[key] };
  });
  return Object.assign({}, ...keyValues);
}

return <div style={CSSstring("margin-top: 4px; top: 100px")}></div>

将样式字符串转换为javascript对象

这是我的解决方案。我生成了一个json对象，像这样

const generatedStyles = {
    "background-image": "url('"http:/someurl/foo.JPEG'"), 
    "background-size": "auto 30px",
    "background-position": "center center"
}

我需要一个方法来将它转换为一个新的对象，为响应样式对象使用camelcase键。我已经在我的组件中定义了这个

renameKeys(obj) {
    const keyValues = Object.keys(obj).map(key => {
        var camelCased = key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
        return { [camelCased]: obj[key] };
    });
    return Object.assign({}, ...keyValues);
}

，可以在渲染中使用，如<a style={this.renameKeys(generatedStyles)}>styled link</a>

相关文章：