Styling

Modularjs makes styling your components flexible and simple by supporting two ways to style:

1. CSS files paired with your component (automatic loading)

2. Inline styles via the style prop on elements

---

1. CSS Files

• Each component can have one CSS file with the same filename as the JSX file but with .css extension.

• The CSS file must be placed next to the JSX file in the same folder.

• Modularjs automatically loads this CSS file and injects it, no import or extra setup needed.

Example folder structure:

/pages
  /Dashboard.jsx
  /Dashboard.css

Modularjs loads Dashboard.css whenever it loads Dashboard.jsx.

---

2. Inline Styles

• You can also use inline styles via the React-like style prop in your JSX.

• Inline styles work normally and are useful for dynamic or scoped styling.

Example:

return <h1 style={{ color: 'white', fontWeight: 'bold' }}>Hello World</h1>;

---

Benefits of Both

• CSS files keep styles modular, reusable, and separate from logic.

• Inline styles provide easy dynamic styling and overrides.

• You can combine both seamlessly inside your components.

---

Quick Example

SpinningSquare.jsx

module.exports = () => (
  <div className="square spin" style={{ borderRadius: '8px' }} />
);

SpinningSquare.css

.square {
  width: 50px;
  height: 50px;
  background-color: crimson;
  margin: 20px auto;
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

No import of CSS needed—styles are auto-applied, and inline style { borderRadius: '8px' } adds rounded corners dynamically.

---

Summary

• CSS files: one per component, auto-loaded by Modularjs, keep styles organized.

• Inline styles: use React-like style props for dynamic or component-scoped styling.

• Both can be used together for maximum flexibility.