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{
}
Related
Image will best describe this:
code sandbox:https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html
I'm writing React app inside non react app and their styles interfere with my React app styles.
How do I overwrite bootstrap-enterprise.css stylesheet only for the region of my React app without overriding the style rest for the rest of the page (The top app bar is theirs)
Edit:
.App {
all: revert;
}
worked initially, but then I tried it my real usecase (overrding Mui Textfield styling component) and it didn't. i edited the codesandbox for the exact case.
Since your React app is separated from the rest of the app, you could use the all css property to reset all the styles inside your React app before to write yours :
/* Affect all the elements under .App */
.App * {
all: unset
}
In your codesandbox, adding it at the top of your styles.css seems to work fine.
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
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!
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.
I have a react application, which uses react-bootstrap + bootstrap-sass.
I´m loading the bootstrap.scss file in my main app.scss like this:
#import '~bootstrap-sass/assets/stylesheets/_bootstrap';
In my page, I implemented a simple Component from React-Bootstrap.
But the modal window has no CSS whatsoever, so it looks really bad.
I´ve tried to load the modal.scss directly
#import '~bootstrap-sass/assets/stylesheets/bootstrap/_modals';
But still no styles are applied.
(the modal appears and hides as expected though).
Bootstrap scss is loaded though, as the styles on buttons, dropdowns, etc is present.
You you need to import the compiled CSS into the component JSX files that it applies to.