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:
JavaScript:
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:
CSS:
.body1 {
background: red;
}
At sa loob ng iyong Home page component, maaari mong i-import ang CSS module at gamitin ito sa iyong markup:
JSX:
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:
JSX:
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.