Next.js Discord

Discord Forum

is it possible to dynamically change css classes in the server component?

Answered
Rex posted this in #help-forum
Open in Discord
RexOP
Pretty much what the title says. Lets say I want to change the root layout color on child's component interattion. what is the possible way to achive this?
I can't use state since this is server component
Answered by B33fb0n3
yea:
<div style={{
        color: `red`,
    }}>
        ...
</div>
View full answer

8 Replies

@Rex Pretty much what the title says. Lets say I want to change the root layout color on child's component interattion. what is the possible way to achive this? I can't use state since this is server component
B33fb0n3
yes you can for example set styles thought the styles prop. Also on serverside. And you can also change variables on child components, so it will be changed everywhere the variable is used
@Rex Pretty much what the title says. Lets say I want to change the root layout color on child's component interattion. what is the possible way to achive this? I can't use state since this is server component
Brown bear
If you have the information required to decide the css at build time you can use getStaticProps()

import styles from './styles.module.css';

export default function Home({ data }) {
  const dynamicClass = data.condition ? styles.classA : styles.classB;

  return (
    <div className={dynamicClass}>
      <h1>hello, world!</h1>
    </div>
  );
}

export async function getStaticProps() {
  const data.condition = cssLogic()

  return {
    props: {
      data,
    },
  };
}


Clearly you might also have the information directly available to the component as a prop

<Component style="dark"/>

and in this case you don't need getStaticProps()
If the data is not known at build time then you can't do it in a server component
@Rex can you give some example code for style props'
B33fb0n3
yea:
<div style={{
        color: `red`,
    }}>
        ...
</div>
Answer
B33fb0n3
@Rex solved?
B33fb0n3