I am trying to create reusable components using Angular 1.4.3 and Angular-Material 1.0.5. Idea is that we can integrate these components in different applications.
But the problem that I am facing here is that the Angular material CSS has certain styles applied to generic elements like html,body because of which styles of the consuming app is getting overwritten.
To add more clarity to this, consider an example application A which has its own styles for 'body','html', 'input' tags. This application would include my custom component's CSS and JS to get my reusable component. While doing so, application A loses its own styling. And I cannot do a '!important' on application A's styles as i do not own them.
To fix this issue, I tried namespacing angular material styles as part of my grunt build process. But that didn't really fix the issue and most of my angular material directives doesn't seem to be working.
I tried checking angular material github issues but I don't see a proper solution for this.
https://github.com/angular/material/issues/6369
https://github.com/angular/material/issues/469
Is there a way to properly namespace angular material styles? Please help.
Not totally sure if I understood correctly, but using !important on you own style should override the ones set by Ng Material.
To take one of the examples you linked to
input {
font-family: Tahoma !important;
}
But, remember to use !important only when really necessary. Like in this case, when you can't control the styles that you need to override.
Related
Why can't I customize the styling of web component libraries i.e UI5, beyond themes? I have tried everything from inline styling to wrapping the web components in Styled-components. I tried using :host(), ::slott. I've tried to inject style tags into the template itself. I'm really at a loss, I wasn't able to change one pixel of styling. I'm leaning towards the issue being multiple shadow dom or encapsulated CSS.
<TabContainer backgroundDesign={"red"} ref={ToggleRef} className={`webCompToggleTabBar`} id="UI5TabContainer" tabs-overflow-mode="StartAndEnd" collapsed fixed>
{Object.keys(Tabs).map((subTemplate, i) => {
return (<Tab className="webCompToggleTab" key={Math.random()} additional-text={subTemplate} name={subTemplate} />);
</TabContainer>
Now the outer Tabcontainer is easilystyled with any type of styling, but when I attempt to style any of the tabContainer's inner Tabs...crickets
Just for clarity, I am building a lit-html wrapper around pre-built web-component libraries to work with React and Angular. But I need to be able to restyle the imported web-components
so the issue with styling web components from freely available libraries are:
Web components are usually created using the shadowDOM, this is great for
encapsulation. But when you want to go back in and try to override that
encapsulation and completely overwrite the web components CSS. You will
get stuck in the top layer of the web component, just outside it's shadowDOM(if there using it). With some libraries,
this is done on purpose, others allow you to do this but you may have
to fork over some hefty cash to use those libraries.
Fortunately, there are some things you can do to spice up the web-
components. CSS variables, A lot of libraries build CSS variables into
their components for theming. So one thing you can do is find their list of CSS variables either on their Documents page or in the elements tab in your browser and just cut and paste them
in.
If this is not enough for you there is another option.
You can create your own web components in a way very similar to
creating them in ReactJS. There is a tool called Stencil which
gives you a way to create web component using typescript and CSS.
Stencil solved all my issues, it has all the polyfills built in.
It sets up all your testing and deploying. https://stenciljs.com/
Is there a way to mix react-md and material-ui components?
I'm trying to use componenets from both libraries, but they override the styles from each other.
Any ideas?
i dont think think thats an good idea , beacuse i have tried the same ,initially it works fine but when you want to add more styles, or try to customise it ran into errors, styles collide with each other and you wont get desired result.
and it will also gives problem in server side rendering.
if react-md or material ui standalone not fullfilling your requirements than you can also take look at semantic-ui
Due to certain circumstances, I'm forced to move my Angular 2 App to AngularJS.
Most of my Components have their own StyleUrl property for their specific stylesheets. So far searching online, I haven't found a way to do so in AngularJS, except integrating Webpack to my project, however I'm having trouble doing so.
I was wondering if there's another way, and if there isn't, what's the proper way of using Webpack for this?
EDIT: 5/9/2017:
Wanted to give an update on my situation. After some testing on the Dynamic CSS loading module which Yeshwanth provided, I discovered that the component CSS leaked to the outside DOM, which meant I had to keep searching for another solution.
Eventually I resigned to use the SCSS approach: Inside the component template, define one, big, encapsuling div element, and give it an ID of some kind. Then, inside an .scss file, write the style block for that ID and INSIDE that block place all of your component styles. After compiling the SCSS file, the resulting css file will act only on the component's elements.
I'm not sure if this fully emulates the emulated Shadow Dom of Angular 2, but for my purposes it was enough. Hope this helps.
I think in angular 1.x you cannot import style specific to your component.
But the dynamic css loading might come handy.
Please refer this
I would like to convert websites from PSD prototype to HTML/CSS/Bootstrap and then move on to JavaScript development and using React.js and some JavaScript coding.
Is it possible to use pure Bootstrap with React.js without using React-Bootstrap?
Also is it possible HTML/CSS Freelancer to do React-Bootstrap as a mockup only and then find a JavaScript developer to do the advance work like React.js and JS development?
I would like to develop app for Desktop using Electron and Hybrid App using same code base as possible.
In theory, yes. Since ReactComponent render themselves as html, you can just put the right css classes and there you go. That's totally fine for the css part of bootstrap.
BUT, all the javascript stuff done by the bootstrap library that modify the DOM will be in "conflict" with the virtual DOM of React.
One way to avoid that is to never rerender a react component for which its inner html is modified by bootstrap (by setting shouldComponentUpdate() { return false }).
Doing this way, you can think of React as just a template library to generate some HTML markup, and letting bootstrap actively modify this markup for you but's it's not what React is made for.
The whole point of React is the ability to see your UI as a function of your state : view = f(state) at any given moment.
That's why react-bootstrap reimplements all DOM modifications in a React way.
For sure you can. I will include the bootstrap css as a CDN and go with the normal development.
I am developing a web app and using AngularJS. But, until now, I have no UI animations. I'm wondering to use jQuery or AngularJS to make the animations.
I know that AngularJS has ngAnimate directive, as I can build my own directive, but there are a lot of good animations in jQuery and a lot of good examples. Why should I make UI Animations using AngularJS? Only to keep the AngularJS standard in my code? Or there are more than that?
Is common to always use AngularJS for all animations when we are talking about an AngularJS web app?
If you're using angular's MVVM methodology when binding your data to your UI, angular-animate would be much much simpler and more intuitive.
Depends on the animations you want to have.. Using angular-animate you could easily do things like: stagger animation for ng-repeat items on entry, leave and move (different for each). easy with angular-animate, but could be hard without, again - depends on your animations, how you access and modify data ,etc..
Angular-animate allows you to easily:
Use existing CSS classes that built-in angular directives use whenever they manipulate the DOM: .enter, .leave, .enter-active, .leave-active etc. You can easily add CSS 3 transitions to animate when items are added or removed from an ng-repeat, for example.
Use scripting libraries to do the animations (jquery, tweenmax, etc). This is also CSS class driven.