Different ways for work with CSS on ReactJS

React JS has revolutionized the way we think about structuring and building web applications. In terms of styling, React gives us several methods to add CSS styles. Here are some CSS tips and tricks that are particularly relevant when working with React:

CSS Modules: Working on Styles.css and this file is called in another js file, App.js. CSS Modules are a popular way to use CSS with React. They are CSS files in which all class names and animation names are scoped locally by default. This results in a unique class name that effectively eliminates the problems of global scope, which can cause naming collisions in your styles.

//Styles.css
.button {
   background-color: blue;
   color: white;
}

App.js

import styles from './Styles.css';

function App() {
  return <button className={styles.button}>Click Me</button>;
}

Styled-components: This is a CSS-in-JS styling library that uses tagged template literals in JavaScript and the power of CSS to provide a platform that allows you to write actual CSS to style your components. It removes the mapping between components and styles, which means that when you’re defining your styles, you’re actually creating a normal React component.

import styled from 'styled-components';

const Button = styled.button`
   background-color: blue;
   color: white;
`;

function App() {
  return <Button>Click Me</Button>;
}

Inline styling: React allows you to use inline styles, where you can simply pass an object containing your styles to an element’s style attribute. However, it’s important to note that JavaScript object keys are camelCased, so when you want to use a property like background-color, you need to camelcase it to backgroundColor.

function App() {
  const style = {
    backgroundColor: 'blue',
    color: 'white'
  };

  return <button style={style}>Click Me</button>;
}

Dynamic Styles: With inline styles, you can easily make your styles dynamic. Since you are writing your styles in JavaScript, you can use all the power of JavaScript to create styles based on props or global state.

function App() {
  const isActive = true;
  const style = {
    backgroundColor: isActive ? 'blue' : 'gray',
    color: 'white'
  };

  return <button style={style}>Click Me</button>;
}

CSS Frameworks (React-Bootstrap Example): CSS frameworks like Bootstrap, Material UI, Tailwind CSS, etc., can also be used in React applications to quickly create styled components. Most of these libraries have their own React-specific libraries (like react-bootstrap for Bootstrap and @material-ui/core for Material UI) that are compatible with React’s component structure.

import Button from 'react-bootstrap/Button';

function App() {
  return <Button variant="primary">Click Me</Button>;
}

Conditional Styling: You can apply styles conditionally in React, using ternary operators or logical AND (&&) operators within the className or style attribute. This is particularly useful for highlighting the active navigation item, showing error states, toggling visibility, and more.

function App() {
  const isActive = true;
  const className = isActive ? 'active' : 'inactive';

  return <button className={className}>Click Me</button>;
}

React Transition Group: To animate components in React, you can use libraries such as React Transition Group. This library allows components to transition in and out of the DOM, with declarative animations applied through CSS.

import { CSSTransition } from 'react-transition-group';

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <button>Click Me</button>
      </CSSTransition>
      <button onClick={() => setInProp(true)}> Click to Enter </button>
    </div>
  );
}

Then in your CSS, you can define your animations with .my-node-enter, .my-node-enter-active, .my-node-exit, .my-node-exit-active etc.

Sass or Less with React: Both Sass and Less can be integrated with React apps to utilize features like variables, mixins, and nesting when writing CSS. Create React App supports both out of the box.

Each of these methods has its strengths and weaknesses, and the best choice often depends on the specific requirements of the project. Combining these methods wisely can lead to a robust, maintainable, and scalable styling architecture in a React application.

// Styles.module.scss

$color: blue;

.button {
  background-color: $color;
  color: white;
}

//App.js

import styles from './Styles.module.scss';

function App() {
  return <button className={styles.button}>Click Me</button>;
}

These are very basic examples, and the complexity would increase as you start dealing with larger applications. However, they provide a good starting point for understanding how to use these methods.