i currently have an AngularJS + angular materialv1 app, and we're migrating it to Angular + angular materialv2.
We're running it in hybrid mode for now. All is working well except for the CSS styles.
Styles from material 1 and 2 are conflicting.
I read that i need to use the "compatibility mode" : https://github.com/angular/material2/pull/2790
But I couldn't find out how to set it. Would anyone know how to turn it on ?
Thanks for your help on this.
I found the solution here: i need to import the NoConflictStyleCompatibilityMode class along with MaterialModule
import { MaterialModule, NoConflictStyleCompatibilityMode } from '#angular/material';
...
#NgModule({
imports: [
MaterialModule,
NoConflictStyleCompatibilityMode
],...
If that can help someone...
Related
I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.
My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css'
]
}),
require('postcss-postcss-calc')
]
};
So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:
:root {
--fc-button-bg-color: red;
}
But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?
I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d
Thank you!
I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)
I am trying to essentially embed a Vue component into another one from a remote source (npm), without using a Vue Plugin. The components are mounting as expected, however, because the embedded component uses Vuetify, it's style is polluting the style of the "parent" application Here's some images that hopefully illustrate what i mean:
Note the primary colors of the root application before mounting the embedded component
Upon mounting of the Login (embedded) component:
I tried the strategy mentioned here, using less in the embedded component to import the vuetify css at a block level, but it doesn't seem to be working for me.
I realize that, in the end, I could ultimately solve this by ensuring the embedded theme matches the root applications theme, but I'd rather not have to rely on that. If my component is being built with webpack, why am I unable to apply Vuetify's css to just that component? Any suggestions?
happy to include code if necessary
To use with vue.js install postcss-parent-selector
npm i postcss-parent-selector -D
then create a postcss.config.js file in root and add following code
module.exports = {
plugins: [
require("postcss-parent-selector")({
selector: ".mywrapperclass",
}),
],
};
Then in public/index.html add a wrapper element around the app:
<div class="mywrapperclass">
<div id="app"></div>
</div>
Some links:
https://vue-loader-v14.vuejs.org/en/features/postcss.html
https://www.npmjs.com/package/postcss-parent-selector
https://github.com/postcss/postcss
I am currently having the same issue with my application. The possible solutions I've came up with are:
-Embedding the child Vue application via iframe and using a library like vuex-iframe-sync to pass props between Vuetify root app and the child app.
-Disabling Vuetify theme alltogether and perhaps customize components on my own:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: { disable: true },
})
-Another option was using webpack config to run a PostCSS plugin and possibly add prefixes to Vuetify's global styles while bundling the app, but I couldn't figure out how.
Please let me know if you make any progress on this topic!
I am newbie in Angular, do not blame me if something I explained wrong ...
I have started learning of Angular and faced with the problem:
How to separate style of my component from default style in Web App ?
It is useful when you find a nice Angular Component on the Web, copy it in your application and it looks like as was intended.
I have found on the Web that something like this possible with:
encapsulation: ViewEncapsulation.Native
But seems it doesn't work ...
Is there any solution for such case ?
I am incorporating RTL to my React application. I have two CSS files, one for LTR and one for RTL. I have a drop down from where user select either English version or Arabic version.
I am stuck with that how to conditional import my RTL CSS file when user select Arabic version and back to normal CSS file when user select English.
Any help or guidance on this will be highly appreciated
I am using React & webpack
Regards
I have faced this problem before, What I have done is that when my main container is mounting, I check for the language, if it's Arabic, I require the Arabic CSS file, if not I require the other.
Example:
class Main extends Component {
componentWillMount() {
if(this.props.language === 'ar') {
require('arabic.css');
} else {
require('english.css');
}
}
}
I'm using Redux as well, which makes it easier for me to get the initial or default language, and change all the other components accordingly as well.
Just make sure you have the CSS loader configured in your webpack configuration file.
Use React.Lazy and React.Suspense to conditionally import them.
Read this article
I am trying to use an mdl-select component in a form on angular 2 but the component is showing in drop drown state the whole time. I assume it is because I have not associated css with it but am unsure how to do this in angular 2 quickstart solution. Any guidance appreciated...
enter image description here
Thanks:)
I had the same problem. After trying different things, this is what worked for me: I added SASS styles .scss to ‘styles’ array of angular-cli.json. Instead of .css files to index.html. And, we have to add scss for popover component, too, as that is the one used internally. You don’t have to import the popover component, though, unless you are using it elsewhere.
angular-cli.json
"styles": [
"styles.css",
"../node_modules/#angular2-mdl-ext/select/select.scss",
"../node_modules/#angular2-mdl-ext/popover/popover.scss"
],