We Keep Coding

Is there any solution to these problems with Next.Js?

So i recently migrated from react to Next.Js, I am facing these issues and want to know if these have a solution :
Unlike react next can't just change a specific part of webpage and keep static part like navbar same throughout all my pages, I have to specifically add my Navbar component to all pages
The {styles.example} way of using css seems like a lot of work, I saw a lot of people using to do css within the js file, but it becomes a mess when I try to make it responsive. Is there any way i can use css just as normal like import it in js file, and use classname='example' in example.module.css

use _app
https://nextjs.org/docs/advanced-features/custom-app
import css in _app is global
https://nextjs.org/docs/basic-features/built-in-css-support
css extended
head(html way, won't apply loaders,make sure resource placed as refered): https://nextjs.org/docs/api-reference/next/head
import css (_app just like head but go webpack, named if not _app): https://nextjs.org/docs/basic-features/built-in-css-support
styled-jsx (inline,scoped by default, set global via prop): https://github.com/vercel/styled-jsx
element-style-prop: the react way
example cases
head in _app: compiled global css like bootstrap reset...
import css in _app: global custom css
head in component: compiled css for component, like date picker
import css in component: named fassion
styled-jsx: css fassion, scoped by default, global if global prop set
element-style: react fassion, element level

Apply css style to all primeng dialogs in my angular app

I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:
contact.html
contact.component.ts
contact.css
So I place the below css in contact.css and it changes the contact us dialog title bar color.
:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
background-color: red
}
I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.

So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.
You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.
However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.
Hope this helps, cheers!

Dynamically inserting SCSS classes with React

Basic question on best practices for dynamically inserting SASS classes with React.
I have a React component with two props: componentId, and color. The components are rendered as a list. Each time they're rendered, I want them to set the component's CSS background color as this.props.backgroundColor.
I understand that I can do this with inline styles, but that that's generally frowned upon due to difficulty maintaining it. I currently have an SCSS file with a number of classes.
How could I dynamically append an SCSS class with the class name this.props.componentId and the color this.props.backgroundColor?
For example, if the component had this.props as
componentId: list-item-123456789
color: #00FFFF
How could I append, from the react component, the following SCSS class to my style.scss file?
.list-item-123456789 {
background-color: #00FFFF;
}
Is this a job for styled-components? Is this one of those cases where inline-styles is probably the best practice for the job? It feels icky to me to do that just from what I've been reading but I'm not sure how to approach the above solution.

As you've guessed, this would be a job for styled components or inline-styles. When your React application compiles, all of those SASS files are converted into standard CSS via Webpack (I presume). Thus, once your application has been bundled and deployed, your SASS files are redundant.

Inline styles are not the same as just setting a class on an element which you can do if you are going to actually manually create all those style classes.
Just do
<li className={{this.props.componentId}}>Some Item </li>
Make sure your SASS class's are global or in scope for that component.

How to scope internal Vue application css from rest of the website?

I need to create a "plugin" that contains a user interface which will be displayed on many different vendor websites. This is a CMS agnostic plugin. I cannot use an iframe for SEO reasons. I need to isolate the plugin's css (and maybe js) from the rest of the website, and stop the rest of the website's css from getting to this plugin. How can I do this?
Update:
Ok, so I've asked a question that's a little too specific to my setup/tech. The question should have been: How do I isolate an html element from the rest of the document styles? This is answered here;
New Question: How do I scope Vue CSS so that it doesn't propagate up, but propagates to child components?
E.g I have the main Vue component which includes bootstrap.scss, i need that to apply to all child components, but I don't want it to leak into the main website. Adding scoped to style stops the leak upward, but I want it to apply to child classes as well.

Ok, I've figured it out.
Pretty simple really, combined with this answer to prevent parent -> child inheritance. I scoped all Vue css into #app { /*styles*/ } INCLUDING the bootstrap import. E.g.
<style type="text/scss" lang="scss">
#app {
#import '../node_modules/bootstrap/scss/bootstrap';
// rest of vue global styles go here.
// child components may use scoped
}
</style>
Note: I am NOT using scoped attribute on the root vue component.

I think this is what you’re looking for. In your .vue file you can add style tags to the template, then Vue will create Shadow DOM styles that only apply to your application. In the final product the styles are rendered via a data-v attribute to prevent class name conflicts.
https://vue-loader.vuejs.org/en/features/scoped-css.html
(Copied from my reddit answer)
https://www.reddit.com/r/vuejs/comments/76ss46/how_to_isolate_a_vue_application_from_the_rest_of/?st=J8UMA1JQ&sh=c3ebf5b1

Vue.js modify other component's style

I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:
I've am using vue-router and the following structure for the main app template:
<customNav></customNav>
<router-view></router-view>
The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.
I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.
How would I solve this problem?

You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
I think you can change this variable in two ways:
Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.