How to mix react-md and material-ui components? - javascript

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

Related

Material UI VSCode autocomplete

i am using material ui and vscode. autocomplete really annoys me when I write styles in makeStyles because it doesn't understand that I'm writing styles as styled components.
For example, he constantly puts ";" where it would be ",". These are trifles, but these trifles appear dozens of times a day.
Tried to find some mui extensions for vscode but couldn't. There was an attempt to use tabnine for autocomplete, and it does the job, but I don't like how tabnine works in general.
By the way, in another project where I use the styled-components library - everything is ok, there vscode successfully copes with autocompletion. I do not understand what can be done with mui.screen
I also thought about trying webstorm, but it seems redundant to switch to another IDE because of this alone.

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/

Can we use pure Bootstrap with React.js?

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.

Namespacing Angular Material Styles

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.

How can I stop JQuery import from breaking existing code

I'm a beginner developer in Html/Javascript/CSS/Jquery coding
and while working a project, I had to integrate Jquery with previous code.
As soon as I imported Jquery, even simple buttons became styled badly. Jquery worked fine as long as I used its classes to assign styles to objects.
However since the rest of the project is not to change style, I need to know what I'm doing wrong. I've checked the objects for classes, and they have no classes, so it's not a css issue.
I narrowed down the error to the following screenshot, but I still can't figure it out. It seems to be something simple that I missed but I have no idea what it is.
Ignore the class="ui-content" and class="ui-button-text". I was just testing if something would change (nothing changed).
Try to inspect the elements that are styled wrong with your developer tools in the browser. The only styling in your example is in jquery.mobile-1.4.5.min.css, so that's where I'd be looking. Did you mistakenly delete a link tag to your stylesheet?

Categories