*****Inline Styles*****
There are many different ways to use styles in React.
An inline style is a style that’s written as an attribute, like this:
<h1 style={{ color: 'red', padding:'0px 10px' }}>Hello world</h1>
Notice the double curly braces. What are those for?
The outer curly braces inject JavaScript into JSX. They say, “everything
between us should be read as JavaScript, not JSX.”
The inner curly braces create a JavaScript object literal. They make
this a valid JavaScript object:
{ color: 'red' }
*****Style Object*****
One problem with this approach is that it becomes obnoxious
if you want to use more than just a few styles.
An alternative that’s often nicer is to store a "style object"
in a variable, and then inject that variable into JSX.
Defining a variable named style in the top-level scope would
be an extremely bad idea in many JavaScript environments!
In React, however, it’s totally fine.
Remember that every file is invisible to every other file,
except for what you choose to expose via module.exports.
You could have 100 different files, all with global variables
named style, and there could be no conflicts.
const styles = {
background: 'lightblue',
color: 'darkred'
}
export function Example(){
return (
<h1 style={styles}>Styled H1</h1>
)
}
------------****Style Name Syntax***--------------
In regular JavaScript, style names are written in hyphenated-lowercase:
const styles = {
'margin-top': '20px',
'background-color': 'green'
};
In React, those same names are instead written in camelCase:
const styles = {
marginTop: '20px',
backgroundColor: 'green'
};
This has zero effect on style property values, only on style
property names.
------------****Style Value Syntax***--------------
In regular JS, style values are almost always strings.
Even if a style value is numeric, you usually have to write
it as a string so that you can specify a unit.
For example, you have to write "450px" or "20%".
In React, if you write a style value as a number,
then the unit "px" is assumed.
***How convenient!**** If you want a font size of 30px, you can write:
{ fontSize: 30 }
If you want to use units other than “px,” you can use a string:
{ fontSize: "2em" }
Specifying “px” with a string will still work, although it’s redundant.
-------****Share Styles Across Multiple Components---------****
What if you want to reuse styles for several different components?
One way to make styles reusable is to keep them in a separate
JavaScript file. This file should export the styles that
you want to reuse, via export. You can then import your styles
into any component that wants them.