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

Question

I am rewriting an existing App which was based on AngularJS in ReactJS. In the App the user has the possibility to provide a CSS style string to style certain elements. In AngularJS this was no problem, I just set the 'style' attribute to the given string. In ReactJS I cannot do this anymore, because ReactJS requires a style object. I do not want to change the behavior of the application and require users to now provide a ReactJS compatible style object. Is there any way in ReactJS to just use a plain CSS style string to set the style of an element?

Answer 1

You can set the style string with setAttribute('style', ...) in componentDidMount and componentDidUpdate .

You just need to be able to get a reference to the DOM node that React created. You can use refs for that.

Here's an example. This component accepts a styleString prop, and sets it as the style on the <div/> that it renders.

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;

Answer 2

Made a module that can handle this called Style It easy peasy, think we should all get back to simply writing CSS.

Just pass in the style string as a 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')
);

( 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')
);

Answer 3

If you're using styled-components then don't even bother looking at the other answers. With v4 you can literally just pass a string to the css prop to any html tag or a styled component.

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

And guess what you don't even need to import styled-components . All you need to do is add this babel plugin. It turns any element with a css prop into a styled component.

Read more here .

Answer 4

This is a hack I found for reagent, but I believe it'll work equally well for raw react versions >= 16 (where custom dom attributes are passed threw). Just use the upper case STYLE attribute instead of lower case style , which is intercepted by React.

Answer 5

Convert the style string to javascript object

this was the solution for me. I had a json object generated like this

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

I needed a method to convert this to a new object with camelCased keys for react-styles object. I have defined this in my component.

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);
}

and can be used in the render like <a style={this.renameKeys(generatedStyles)}>styled link</a>

Answer 6

complementing taylor michels' answer

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>