From 981005ef3dcb1e0adf588ce7a56e28f834162913 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Fri, 1 Apr 2022 09:35:39 +0100 Subject: [PATCH] Refactor --- pages/theming/index.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/pages/theming/index.js b/pages/theming/index.js index 0ff218d6af..83ad27a091 100644 --- a/pages/theming/index.js +++ b/pages/theming/index.js @@ -109,7 +109,7 @@ primereact/resources/themes/rhea/theme.css

Designer themes apply a global skin to the library, in case you need to change the style of a particular component, you may use a named class, CSS Modules or a CSS-in-JS solution like styled-jsx.

Named Class
-

A named class is bound to the className prop of a component and the CSS is included with an import. Note that, the css still is still bundled globally so prefer this approach +

A named class is bound to the className prop of a component and the CSS is included with an import. Note that, the css still is still bundled globally so prefer this approach if your application doesn't have a built-in solution to do CSS scoping.

custompanel.css @@ -142,7 +142,7 @@ export default function PanelDemo() { -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@@ -151,7 +151,7 @@ export default function PanelDemo() {
CSS Modules

CSS modules allow importing a css file to your react component and refer the classes inside using a variable. Unfortunately CSS modules do not support cascaded classes to be applied to external components however attribute selectors can be used as a common workaround. NextJS has built-in support for CSS modules allowing css files with .module.css suffix to be interpreted as modules.

- + paneldemo.module.css {` @@ -182,14 +182,14 @@ export default function PanelDemo() { -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS-in-JS
-

CSS-in-JS solutions are also popular to implement scoped css, as an example we'll be using styled-jsx to customize our panel. Note that use of :global does not make the styling global and only +

CSS-in-JS solutions are also popular to implement scoped css, as an example we'll be using styled-jsx to customize our panel. Note that use of :global does not make the styling global and only removes the namespacing from the inner element as it is enough to scope the main container element, in this case .p-panel.

@@ -223,12 +223,12 @@ export default function PanelDemo() { -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 - +
Scaling

PrimeReact utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document. Code below sets the scale of the components based on 16px. If you reqire bigger or smaller components, just @@ -252,11 +252,11 @@ html {

PrimeFlex CSS
-

PrimeFlex is a lightweight responsive CSS utility - library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so - that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. PrimeReact follows the CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. +

PrimeFlex is a lightweight responsive CSS utility + library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and tailwind however PrimeFlex has benefits like integration with PrimeReact themes usign CSS variables so + that colors classes e.g. bg-blue-500 receive the color code from the PrimeReact theme being used. PrimeReact follows the CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. Same approach is also utilized in PrimeBlocks for PrimeReact project as well.

- +

Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.