search

ebi-ait / morphic-website

A generic data catalogue web app to serve the AIT team projects.
0 stars 0 forks source link

project specific style file #88

Closed amnonkhen closed 8 months ago

amnonkhen commented 9 months ago

read https://www.ag-grid.com/react-data-grid/global-style-customisation/

Acceptance criteria:

theisuru commented 9 months ago

Looks like there are few ways to define a project specific theme. This also depend on the UI component library we are using. For example MUI has its own way of defining a theme. Might be better to select the UI library we are going to use before moving forward with this?

theisuru commented 9 months ago

We decided to go without waiting for a component library and its specific style customization recommnedations.

There are two methods widely used for React styling.

  1. css-in-js: css is managed inside jsx/tsx code, less files and context switching (eg. styled-component)
  2. css modules: better separation (eg. vanilla css modules and use of css variables)

As I understand there is a consensus within our team to use separate css files for styling. Therefore, I am adopting the second approach. We will use css modules for managing css of each of the component. Modules helps to isolate css of each component, but add a additional file to each of the components. The global theme.css file will define css variables to pass values to each of the css modules. We should name css variables appropriately, so they have a meaning in the theme.