whats wrong with this line?
var firstColStyle = {text-align: right};
This works:
var firstColStyle = {width: 70};
Seems to be an odd syntax for styles.
The documentation about this issue is very poor.
How to make elements reactive, so I can't use 20% instead of 300px.
Change firstColStyle to:
var firstColStyle = { textAlign: 'right' }
If you have to set px you can:
var someSize = { width : '2px' }
If percentage:
var otherWidth = { width : ' 10%' }
px for many style properties. You can simply do var someSize = {width: 2} and it will be converted to pixels. React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit. Some units accept numbers and aren't appended with "px".text-align isn't a valid Javascript identifier, so you can't use it as part of a literal expression in your code. All of the below examples fail for the same reason.
var text-align = 'right';
style.text-align = 'right';
var style = { text-align: 'right' };
Creating the property with a string is valid though.
style['text-align'] = 'right';
// or
var style = { 'text-align': 'right' };
// or
const prop = 'text-align';
const style = { [prop]: 'right' };
However, that breaks from regular Javascript variable naming conventions and forces you to write your code using accessor notation.
You'll find that the native API for styling elements uses camelcase notation to represent styles and React has followed the existing convention.
// existing style api
document.body.style.textAlign = 'red';
The only approach React supports for units, is specifying them as string, so to use 70% you would need to write '70%'.
Personally, I think this is a bit messy. I've been using garden recently (a way to write CSS with Clojure) and that provides a handful of functions for specifying units. I'd be tempted to recreate them in Javascript if I was going to be using inline styles with React.
Something like this:
import { px, em, percent } from 'units';
var width = 30;
const style = {
height: px(width * 2),
width: px(width),
margin: percent(5)
};
This enables you to keep your units as numeric variables, which means you can do maths with them without having to write any nasty string concatenation code.
let unit = u => x => `${x}${u}`; let px = unit('px'); let em = unit('em'); let percent = unit('percent');
