Formatting a CSS property in React

Question

Please can someone tell me how to format the marginLeft value? I can't figure out how to escape the dash when declaring properties in this way. I have tried quite a few different ways but none have worked. Please also let me know if it is not possible at all. Thanks.

import React from "react";

const informationStyle = { 
  fontSize: "0.6rem",
  marginLeft: "get-spacing(small)"
};

const Information = () => (
   <span style={informationStyle}>
      <svg className="cp-icon-svg cp-icon-circle" /></svg>
   </span>
);

export default Information;

You need to make a class in sass and use className ratherThan use style — Birbal Singh
– Birbal Singh, Commented Mar 20, 2018 at 14:48
here a template to use sass with react github.com/bsmahala/react-redux-route-sass-login — Birbal Singh
– Birbal Singh, Commented Mar 20, 2018 at 14:51

colt082295 · Accepted Answer · 2018-03-20 15:11:53Z

1

You're trying to use Sass in the React component? I don't believe that's possible. What you could do is simply put the Sass inside a separate Sass file, compile that into css, and then import the css into your project.

import './yourCssFile.css'; // Put this below your React import

const Information = () => (
   <span className="informationStyle"> // informationStyle is inside yourCssFile
      <svg className="cp-icon-svg cp-icon-circle" /></svg>
   </span>
);

You could also use Css modules rather than importing the full Css file. You can learn more about Css modules here.

answered Mar 20, 2018 at 15:11

colt082295

501 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Formatting a CSS property in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related