JSX - CSS

See https://github.com/explorer436/programming-playground/tree/main/react-playground/05-jsx-css

style prop

1. {} in JSX means going back to JavaScript Land
2. value is an object with key/value pairs - capitalized and with ''

const Author = () => {
  return (
    <h4 style={{ color: "#617d98", fontSize: "0.75rem", marginTop: "0.5rem" }}>
      Ariel Lawhon
    </h4>
  );
};

css rules still apply (inline vs external css)

If there is a CSS file and if there is configuration for h4 in that file, they will not work for this particular element. So, color will be “#617d98” and not “red”.

.book h4 {
  /* won't work */
  color: red;
  /* will work */
  letter-spacing: 2px;
}

Using inline css is not a preferable approach

However, external libraries may use inline css. So, if you want to make some changes, reference the library docs and elements tab.

Alternative option

const Author = () => {
  const inlineHeadingStyles = {
    color: '#617d98',
    fontSize: '0.75rem',
    marginTop: '0.5rem',
  };
  return <h4 style={inlineHeadingStyles}>Jordan Moore </h4>;
};

Always try to externalize CSS into separate files

It will make maintenance much easier.