We Keep Coding

Why cant I customize the styling of web component libraries, beyond themes? saps UI5

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/

How to add a ThemeProvider to bit.dev

I'm starting a new UI-library with bit.dev
However I can't find any information or docs on how to add a "global" Provider to these compoonents?
I have several apps I want to use this UI-library with different theme colors.
I don't want to hardcode the colors into each component so I want all my components to be wrapped in a "global" ThemeProvider of some sort to supply the colors.
How can you accomplish this with bit.dev?
Do I really wrap every single component with a ThemeProvider like this:
<ThemeProvider theme={theme}>
<Button {args}>
{args.children}
</Button>
<ThemeProvider>
That seems a little strange, and I want each app to be able to supply it's own Theme (not hard-code one into the ui-components library)
I also don't want to have to supply a theme to every single component I import in my library.
Ideally they will just pick up my already existing ThemeProvider w/ emotion-css, or worst case I have to add another Provider that supplies the theme to all my bit.dev components?
Would really appreciate some help on how to do this with bit.dev? I feel like I'm missing something simple.

Reactjs, React, styled-components - Does Rebass library object literal based props rerender components unnecessary?

I am new to react and wondering using react with REBASS : https://github.com/rebassjs/rebass for ui component design and responsiveness, but syntax i say bothers me as they are objects created in render function.
Doesn't it will create unnecessary re-renders ?
if not why not. Not able to understand.
<Box css={**{color:blue}**} width={**[1,1/2,1/4]**} />
https://github.com/rebassjs/grid
Any thoughts?

In my thinking, you want to use the styling is react-app.
if you want make the other styles.css, you have to make it first, and then import the style.
For example, import ./styles.css -> this styles.css have to same located your react App. if you wanna change this, you can control by use './', '../'
and then --> comes from the style.css.
When you want to add the style, you have to use the "ClassName"
The other ways find this~! react_Style ways
Have a good day~!
enter link description here

How to import Stylesheets for AngularJS components?

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

React.js & Radium.js - Making React styles global in nature, yet subject to user input?

I am just starting to learn Radium, so please overlook my ignorance. If there is anything great about CSS files, it is that you link to them once in your main APP component and forget them, they are cached and can be used in all your components simply.
But, you cannot connect any interactivity between them and any user input.
Here is a simple snippet I played around with based on the sample provided on the Radium github:
import React, { Component, PropTypes } from 'react';
import Radium from 'radium';
const squareStyles = {
both: {
background: 'black',
border: 'solid 1px white',
float: 'left',
height: 100,
width: 100
},
one: {
':hover': {
background: 'green'
}
},
two: {
':hover': {
background: 'red'
}
}
};
#Radium
export default class APP extends Component {
......................
render() {
// final result is yellow
squareStyles.one[':hover'].background = 'yellow';
return (
<div>
<div key="one" style={ [squareStyles.both, squareStyles.one] } />
<div key="two" style={ [squareStyles.both, squareStyles.two] } />
<div style={ { clear: 'both' } }/>
</div>
);
}
}
Even though the squareStyles.one[':hover'].background was preset to green, user input made it yellow instead. Great!
But what if I need squareStyles in several components? I do not want repetitive code defining squareStyles in each of them.
Question:
With Radium, or any 3rd party add-on, is there a way I can have a styles.js file global in nature much like css?
If not, who would even consider inline styles when it would just lead to repetitive code that one of the benefits of css takes care of?
Thanks
Update:
I put square styles in a js file encapsulated under module.exports.
I added const styles = require('../styles/styles'); in lieu of the local squareStyles object.
I prefaced all objects of 'squareStyles.' to 'styles.squareStyles'.
Everything works, so ...
I assume I will have to add that required file to every component. Yes?
Will the file be cached?
If I convert all my css files this way to take advantage of user interactivity, will my app become slow?
Am I even going about this correctly?
Again thanks.

With Radium, or any 3rd party add-on, is there a way I can have a styles.js file global in nature much like css?
Yeah sure you can use Webpack to automatically make certain things global, however you don't want to do this. The idea of requiring / important is to not only explicitly manage dependencies, but also reduce the footprint of your site. If you eventually want to get into things like code splitting and loading only the necessary parts of an application up front, you'll want to require things manually.
If not, who would even consider inline styles when it would just lead to repetitive code that one of the benefits of css takes care of?
Inline code CAN lead to repetitive code, and CSS can also leave to repetitive code. One of the things CSS allowed developers to do, was to be lazy and write classes and not have to worry about if there was a class that already addressed the majority of the visual representation they wanted. It's the age old idea that you can use the best language and technology stack and still write bad code.
The thing about React, is that it allows you to create reusable components. You write a couple of reusable component, you import them in another component, then you're only having to write the inline styles once, same as css. You can argue that importing components is more tedious, however there are plenty of problems with css that you'll be getting around by taking this approach. See here: https://speakerdeck.com/vjeux/react-css-in-js
Will the file be cached?
No. Browsers are built to support CSS and cache them. But you have to ask yourself: is the different negligible? For instance more than ever, people are more concerned about users hitting your site for the first, which is where the bounce rate is the highest. You can argue for a cached css file, however if this css file represents the entirety of your application, it will most certainly take longer than inline styles from a couple of react components. Moreover, mounting additional components with additional css may be trivial enough load wise that it wouldn't matter. I'm still measuring this stuff too but what's important to note is that you should think outside the box in terms of what css has preached to developers all these years. There may be a better solution... try it out for yourself performance wise and report back!
If I convert all my css files this way to take advantage of user interactivity, will my app become slow?
https://github.com/FormidableLabs/radium/issues/58
Word on the street is that the performance hit you would get is negligible. Again, put together a small test and see if the performance works for you.
Am I even going about this correctly?
A lot of new methods take time for them to catch adoption with developers, and when they do usually you'll see different patterns come out. The pattern you're using is definitely an option. You may see that option refined, changed or even scrapped (similar to the path of flux if you've been paying attention that project and all it's refinements / spinoffs). I'd say to encapsulate the css into as many reusable components as possible, then use a file like yours as a way to reuse chunks of style that wouldn't necessarily be a component (for instance a piece of code that adds text shadow and box shadow to an element / component), and then lastly leverage one off inline styles for things that aren't patterns or won't be used.