How to write inline styles in reactions

Question

What is wrong with this line? var firstColStyle = {text-align: right};

This works: var firstColStyle = {width: 70};

Does this seem like an odd syntax for styles? The documentation on these issues is very poor. How to make elements reactive, so I cannot use 20% instead of 300px.

Regards

Gerhard

Answer 1

Change firstColStyle to:

var firstColStyle = { textAlign: 'right' }

If you need to install px, you can:

var someSize = { width : '2px' }

If percentage:

var otherWidth = { width : ' 10%' }

Answer 2

text-alignis not a valid Javascript identifier, so you cannot use it as part of a literal in code. All of the examples below are not suitable for the same reason.

var text-align = 'right';
style.text-align = 'right';
var style = { text-align: 'right' };

Creating a property with a string is valid.

style['text-align'] = 'right';
// or
var style = { 'text-align': 'right' };
// or
const prop = 'text-align';
const style = { [prop]: 'right' };

Javascript .

, API , React .

// existing style api
document.body.style.textAlign = 'red';

React , , 70% '70%'.

, . ( CSS Clojure) . Javascript, React.

- :

import { px, em, percent } from 'units';

var width = 30;

const style = {
  height: px(width * 2),
  width: px(width),
  margin: percent(5)
};

, , - .