this is the switch case which is rendering the component in ui

     var {route="dashboard"}= main
 var returnComponent = ""
 switch(route){
   case "dashboard" : 
   returnComponent= <DashBoard/> 
   break;
   case "task" : 
   returnComponent= <Task/> 
   break;
   case "project" : 
   returnComponent= <Project/>
   break;
   case "tasklibrary" : 
   returnComponent= <TaskLibrary/>
   break;
   default: 
   returnComponent= <DashBoard/>
 }

this is where it is getting rendered

<div className="flex-one main-content-box" style={{height:'calc(100% - 55px)'}}>
         {returnComponent}
        </div>

the css of the class main-content-box has got before attribute in css..... where the top property should be be changing according to the component that is rendered

.main-content-box:before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 136px;
    left: -6px;
    /* right: 87px; */
    background-color: #f2f2f2;
    z-index: 2;
    transform: rotate(
223deg);
}

so how to change the top property of the pseudo class according to the component that is getting rendered for example if the dashboard component is getting rendered then the top property of main-content-box will be 30px and if the task compoenent is rendered the same top property will be 130px

CodePudding user response：

Using CSS variable

One approach is assigning which component to render, you may also assign the desired top value

var { route = "dashboard" } = main;
var returnComponent = "";

// top value for the ::before element
let top = '136px';

switch (route) {
  case "dashboard":
    returnComponent = <DashBoard />;
    top = '30px';
    break;
  case "task":
    returnComponent = <Task />;
    top = '130px';
    break;
  case "project":
    returnComponent = <Project />;
    break;
  case "tasklibrary":
    returnComponent = <TaskLibrary />;
    break;
  default:
    returnComponent = <DashBoard />;
}

After that, you can use the top value in the style object and assign it to a css variable such as --top

<div className="flex-one main-content-box" style={{ '--top': top, height: 'calc(100% - 55px)' }}>
  {returnComponent}
</div>

Then finally, you can use the variable in your css code

.main-content-box:before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    
    /* use the --top variable */
    top: var(--top, 136px);

    left: -6px;
    /* right: 87px; */
    background-color: #f2f2f2;
    z-index: 2;
    transform: rotate(223deg);
}

This works for one attribute differentiation. If there're a lot of differences among different elements. You should use the class approach as Summer suggested.

Using class

You may also append the route in the className of the container.

<div className={`flex-one main-content-box ${route}`} style={{ height: 'calc(100% - 55px)' }}>
  {returnComponent}
</div>

Then in your css file, you can add other rules to change the top value accordingly:

.main-content-box:before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 136px;
    left: -6px;
    /* right: 87px; */
    background-color: #f2f2f2;
    z-index: 2;
    transform: rotate(223deg);
}

/* changing the top according to different route */
.main-content-box.dashboard:before {
    top: 30px;
}

.main-content-box.task:before {
    top: 130px;
}

CodePudding user response：

I'm sure there are much cleaner ways of doing this, but for now you can simply make a class variable that you assign during the switch statement, and append it to your parent component like so:

<div 
  className={`flex-one main-content-box ${class}`} 
  style={{height:'calc(100% - 55px)'}}
>
  {returnComponent}
</div>

Additionally, never use inline style props. They cause a lot of unnecessary rerenders. Put it in your normal css.