html - How to apply my css changes only to one component in react js. Css file includes body tag and other tags which are affecting other components as well - TagMerge
4How to apply my css changes only to one component in react js. Css file includes body tag and other tags which are affecting other components as wellHow to apply my css changes only to one component in react js. Css file includes body tag and other tags which are affecting other components as well

How to apply my css changes only to one component in react js. Css file includes body tag and other tags which are affecting other components as well

Asked 1 years ago
0
4 answers

Maybe you should have a look at "CSS Modules Stylesheet in react", here a add some links with some information

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

https://reactgo.com/react-app-css-modules/

Source: link

0

Pass a string as the className prop:
render() {
  return <span className="menu navigation-menu">Menu</span>
}
It is common for CSS classes to depend on the component props or state:
render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Source: link

0

Insert an object with the styling information:
class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      

Add a little style!

</div> ); } }
Use backgroundColor instead of background-color:
class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      

Add a little style!

</div> ); } }
Create a style object named mystyle:
class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      

Add a little style!

</div> ); } }
Create a new file called "App.css" and insert some CSS code in it:
body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      

Add a little style!.

</div> ); } } ReactDOM.render(<MyHeader />, document.getElementById('root'));

Source: link

0

Follow me on this React journey to learn more about these different strategies and approaches in CSS to style your React components. For all of the different ways, we will start with the same React components:
import React from 'react';
function App() {  const [fruits, setFruits] = React.useState([    { id: '1', name: 'Apple', isFavorite: false },    { id: '2', name: 'Peach', isFavorite: true },    { id: '3', name: 'Strawberry', isFavorite: false },  ]);
  function handleClick(item) {    const newFruits = fruits.map((fruit) => {      if (fruit.id === item.id) {        return {          id: fruit.id,          name: fruit.name,          isFavorite: !fruit.isFavorite,        };      } else {        return fruit;      }    });
    setFruits(newFruits);  }
  return (    <div>      <h3>with no styling</h3>
      <Basket items={fruits} onClick={handleClick} />    </div>  );}
function Basket({ items, onClick }) {  return (    <ul>      {items.map((item) => (        <li key={item.id}>          {item.name}          <button type="button" onClick={() => onClick(item)}>            {item.isFavorite ? 'Unlike' : 'Like'}          </button>        </li>      ))}    </ul>  );}
export default App;
Follow me on this React journey to learn more about these different strategies and approaches in CSS to style your React components. For all of the different ways, we will start with the same React components:
import React from 'react';
function App() {  const [fruits, setFruits] = React.useState([    { id: '1', name: 'Apple', isFavorite: false },    { id: '2', name: 'Peach', isFavorite: true },    { id: '3', name: 'Strawberry', isFavorite: false },  ]);
  function handleClick(item) {    const newFruits = fruits.map((fruit) => {      if (fruit.id === item.id) {        return {          id: fruit.id,          name: fruit.name,          isFavorite: !fruit.isFavorite,        };      } else {        return fruit;      }    });
    setFruits(newFruits);  }
  return (    <div>      <h3>with no styling</h3>
      <Basket items={fruits} onClick={handleClick} />    </div>  );}
function Basket({ items, onClick }) {  return (    <ul>      {items.map((item) => (        <li key={item.id}>          {item.name}          <button type="button" onClick={() => onClick(item)}>            {item.isFavorite ? 'Unlike' : 'Like'}          </button>        </li>      ))}    </ul>  );}
export default App;
The most basic way is to just use vanilla CSS in React with CSS files. Next to each component or to each set of components, you can have a file with the .css extension. For example, the following CSS file defines a CSS class for a button:
.button {  cursor: pointer;  border: 1px solid #1a202c;  padding: 8px;  min-width: 64px;
  background: transparent;
  transition: all 0.1s ease-in;}
.button:hover {  background: #1a202c;  color: #ffffff;}
The most basic way is to just use vanilla CSS in React with CSS files. Next to each component or to each set of components, you can have a file with the .css extension. For example, the following CSS file defines a CSS class for a button:
.button {  cursor: pointer;  border: 1px solid #1a202c;  padding: 8px;  min-width: 64px;
  background: transparent;
  transition: all 0.1s ease-in;}
.button:hover {  background: #1a202c;  color: #ffffff;}
In the React JavaScript file, we can import the CSS from this style file and implicitly use it:
import React from 'react';import './style.css';
function App() {  ...}
function Basket({ items, onClick }) {  return (    <ul>      {items.map((item) => (        <li key={item.id}>          {item.name}          <button            type="button"            className="button"            onClick={() => onClick(item)}          >            {item.isFavorite ? 'Unlike' : 'Like'}          </button>        </li>      ))}    </ul>  );}

Source: link

Recent Questions on html

    Programming Languages