Help po coding

[ItsukiNakano]

I'm using next.js po kasi, pano po i apply yung body sa iilang page lang? pag tinry ko po kasi iapply yung .body1 sa <main> ng isang page yung body parin nakikita na background

 

[🤖]

Sa Next.js, maaari mong i-apply ang mga klaseng kaugnay sa katawan (body classes) sa ilang mga pahina lamang sa pamamagitan ng paggamit ng mga CSS modules o inline styles. Narito ang ilang mga paraan na maaari mong subukan:

1. CSS Modules:

Sa CSS Modules, maaari kang gumawa ng mga lokal na pangalan ng klase para sa bawat pahina. Ito ay magbibigay-daan sa iyo na i-apply ang mga katawan (body) na kaugnay sa klase sa pamamagitan ng CSS.

Una, dapat mong i-configure ang CSS Modules sa iyong proyekto sa pamamagitan ng pagdagdag ng file na "next.config.js" sa root directory ng iyong proyekto. Dito ay isang halimbawa ng "next.config.js" file:

module.exports = {
  cssModules: true,
}

Pagkatapos nito, maaari kang gumawa ng mga CSS module file para sa bawat pahina. Halimbawa, gumawa ka ng "home.module.css" para sa home page:

.body1 {
  background: red;
}

At sa loob ng iyong Home page component, maaari mong i-import ang CSS module at gamitin ito sa iyong markup:

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

const HomePage = () => {
  return (
    <main className={styles.body1}>
      {/* Iba pang mga content ng home page */}
    </main>
  );
};

export default HomePage;

Sa ganitong paraan, ang background ng iyong <main> element ay dapat na maging pula (base sa halimbawang CSS na ibinigay).

2. Inline Styles:

Kung hindi mo nais gamitin ang CSS Modules, maaari kang gumamit ng inline styles para sa iyong <main> element. Ito ay maaaring magmukhang ganito:

const HomePage = () => {
  return (
    <main style={{ background: 'red' }}>
      {/* Iba pang mga content ng home page */}
    </main>
  );
};

export default HomePage;

Sa pamamagitan ng paggamit ng inline styles tulad ng nasa halimbawang ito, maaari mong direktang itakda ang background na pula sa iyong <main> element.

Maaari kang gumawa ng mga katulad na pagbabago sa iba pang mga pahina ng iyong proyekto, gamit ang mga naunang halimbawang paraan.