Dynamically inserting SCSS classes with React - javascript

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.

Related

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

Setting :root custom properties inside Shadow DOM

my use case is basically the following: I'm building a component library which should render a component in a web component using shadowRoot.
I have two CSS files:
component-library.css styles the component library and should not leak into the web components (I'm aware that they do when the components use inherit. This is fine.).
project.css is the global CSS file for the project, defining lots of custom properties inside :root {}. I am NOT able to change that.
What I now want is to use project.css inside the shadowRoot to style the components. The reason that it should be inside the shadowRoot is that I don't want this file to affect the component library.
Right now, when I'm trying to implement it, everything works as I want it to except that the custom properties from project.css is missing.
My understanding is that this can't work as the project.css would have to use :host {} instead of :root {}.
Is that correct? Would there be any way to achieve this though?
Thanks a lot!

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!

Problems adding custom CSS to Vuetify component

I'm working with the Vuetify selector input component, v-select, and I want to custom style it. Since the component renders with only one v-select and no necessary children in the html, I turned to styling the component via inspecting in chrome and copying down the class there. For example, to change the font size of the active value, I used:
.v-select__selections {
font-size: 20px;
}
This worked fine, until I realized my styles in this manner did not work on any parts of the (normally hidden) navigation drawer. For example,
.v-menu__content {
height: 500px;
}
Would not impact the styles in any way. Bizarrely enough, it was not simply my styles getting overwritten by Vuetify styles (!important had no effect) - it appeared that my CSS didn't reach the components at all. There was no trace of any of my written styles upon inspect. How?
I believe this is due to the active-based nature of the drawer-part of the selector component. Is there another way I should be addressing those kinds of elements in CSS? I wish I could provide a Jsfiddle, but (on the templates I've found), Vuetify renders completely differently. I'm using Vuetify 1.1.7.
My styles are included directly in the component .vue file, non scoped. Vuetify and vuetify styles are imported in main.js:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
File structure (Default structure from vue init webpack -myProject):
src/
-main.js
-app.vue
-components/
-problematicComponent.vue
index.html
Edit: I also tried using deep selectors, but the problem still remained with the hidden menu components:
>>>.v-menu__content {
height: 500px;
}
Therefore the problem I have is different than the problem here:
Vuetify - CSS not working (taking effect) inside component
I once had a similar problem with the vuetify selector component using SCSS. Are you addressing .v-menu__content as nested inside .v-select? Because, interestingly enough, it isn't a child. It is at the same level as v-app (For whatever reason).
Make sure
.v-menu__content {
height: 500px;
}
isn't nested inside any other components in your SCSS.
while writing deep selector write like
.any_parent_class(can be any identifier) >>>> target_class{
}
i tried it with scoped selector , it worked.
like
.flex >>>> .v-menu__content{
}

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.

Categories