I learned Vanilla JS for some months and now I am building some basic things...
I wanna learn React soon, but for now I want to practice Vanilla JS a little bit before moving on...
I am searching a "CSS Framework" for easy prototyping (or: not caring so much about custom styles) and I really like the style of Material-UI. And because I want to learn React soon anyway, I don't really want to dig into two such things (like extra learning materialize or bootstrap).
Can I use Material-UI without React, with just vanilla HTML, CSS & JS?
Can I just use the CSS styling side of things, or will this result in problems?
And can you maybe give me some tips on how to do it? Is it as simple as including a style and link tag to my HTML?
Yes you can, also an alternative is Materialise, kind of a bootstrap duplicating material ui.
I used it with some of my React projects.
Yes. It is possible. Depending on what your doing, could get messy.
You can use the css classes from Material UI and native html types it renders.
<h4 class="MuiTypography-root MuiTypography-h4">Hello Bud</h4>
A Non JSX approach below is
https://reactjs.org/docs/react-without-jsx.html
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.
Use the React/Material-UI files from CDN https://github.com/mui-org/material-ui/tree/master/examples/cdn/
ReactDOM
.render(
React.createElement(
MaterialUI.Typography,
{variant: "h4"},
"Hello Bud"),
document.getElementById('hello-example')
);
The above will render a Typography Component from Material UI within a dom node with id "hello-example"
yes, I guess this is possible. But maybe not Material-UI. Take a look at Material Component Web which is based on native vanilla methods such SASS/CSS and native JS.
I have even managed to integrate this lib with some React projects of mine.
material-components-web works with vanilla html + javascript
based on material-design-lite
Related
I'm new to Material UI. When should I use props (in the .jsx script itself) and CSS (separate CSS stylesheet) to style MUI elements? Do I still need to use the CSS stylesheets for MUI elements at all, e.g. use CSS or sx={{}} prop? Or should it be left for non-MUI elements only?
While I understand MUI provides us with the template to make style changes using props, I also understand that we should typically follow a separation of concerns, hence the question.
Thanks a lot!
So you can check this out in their docs below.
https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component
I personally wouldn't use CSS with MUI. You can use either CSS or the sx prop to override styles, however it feels like sx is the preferred method. Using CSS requires targeting the specific classname and nesting your classes which I find is quite a lot of work for what is meant to be one-off customizations.
If you wanted to change specific MUI components, I still wouldn't use CSS as you can just create your own themes with the ThemeProvider.
The idea behind MUI is a CSS-in-JS solution so you're sort of doing away with the concept of the traditional "separation of concerns". If you prefer to set up your projects that way, things like Tailwind or SASS/SCSS are more suited to that.
So in summary, yeah I'd only use CSS with the non-MUI components, sx prop for quick style overrides, and the ThemeProvider for global style changes.
We write css when we use styled components, and I dont understand the benefit of using it why we just dont use the css we write as a classname for the components. In styled components we have wrappers of the components and when we use plain css we have class names. what is the advantage of wrapping components with styled components
The reason styled components is pushed in React web development is to encapsulate styles to only those components. There is no risk of bleeding css into other components. Rather than learn a new css organisation structure new developers can onboard more quickly.
That being said, it is restrictive, slower to develop with, and adds some page weight by applying same styles you could have shared.
I have found the fastest way to work is create static html webpages with pure css, and organise it in a way you are going to import it into your framework. Then you can have boilerplate html designs that can be tested independently of the compiler, which is so much faster to test in Internet Explorer, Firefox, chrome, mobile devices and all the varying screen sizes.
If you want to use styled components, you can either use this npm plugin to convert your static css into variables to use with style components -
https://www.npmjs.com/package/#inspiraller/create-css-vars
or just don't. Nextjs does not support css imports unless its global, so webpack compiling option is a more universal solution.
Main benefits of styled-components are listed in the Motivations page on their website.
styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.
Apart from the improved experience for developers, styled-components provides:
Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.
With styled components it's possible to "enhance" CSS classes with JavaScript code because are written in JS.
const Input = styled.input`
color: ${props => props.hasError ? 'red' : 'black'};
`;
Opposed to writing 2 separate CSS classes and control which to show with JS.
.text {
color: black;
}
.text--danger {
color: red;
}
<input className={`text ${hasError ? 'text--danger' : ''}`} />
On the long run it can produce more maintainable code, but it's a matter of personal opinion if it's better to use it or not.
With styled components you can add logic programming
I am working on a web project. I use react-redux for this. I did nearly everything in back-end. But I would like to improve my project's visual side(I mean front-end side). I am currently using bootstrap/reactstrap. Is there a way to manipulate bootstrap? Or should I use css? Any suggestion would be helpfull.
If you are still starting the UI then I would suggest going for flexbox. You can use Bulma framework which is very good. I f you want to go ahead with bootstrap then you have only to edit the css. You can also make you of scss which makes your life more easier.
These are the best front-end libraries for react applications
https://materializecss.com/
https://ant.design/docs/react/introduce
use the styled-components npm package. it will improve your CSS code. and also you can pass the props to the styled-components and etc.
read a document enter link description here
if you want to animate your page, my suggestion is react-transition-group.
Yes , you can use css as external file and import in your file . Also inline css support in react components ,the code like
class MyHeader extends React.Component {
render() {
return (
<div>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
There are css styling libraries available
materializecss
material-ui
semantic-ui
For the front end, you can use material-ui. Really complete but not easy to use for a new.
https://material-ui.com/components/buttons/#contained-buttons
YOu can also use styled components. It's really easy.
https://www.styled-components.com/
I have a simple react component it has in the JSX the property css, I understand this prop it is for styling, but it is not clear if it is a "native" css react property, or if it comes from styled-components or some other library.
Do you have an idea from which library it is if not a react one?
<div css={{color: 'red', backgroundColor:'blue'}}>Hello world!</div>;
css prop comes from styled-components library itself. It is to be used when a small bit of styling does not warrant making a component for it.
However, it is not implemented centrally in the library and functions with the help of the Babel plugin. This is why you don't need to import the function to use it.
Docs
It comes from Glamor which provides many convenient ways to style your components. One way is to use its css prop as in your example. It works exactly the same as the default style prop except it supports the entire CSS language.
Here an example:
https://github.com/threepointone/glamor/blob/master/docs/howto.md
I need to add Twitter's Bootstrap styles to existing GWT component...
I found more than one project but all of them creates new custom components for that purpose...
I need to stick with GWT standard components and have my app L&F looks like TBootstrap.
Thanks.
You will have a great job to do overriding GWT's default css. Your starting point may be the Developer's Guide - Client Bundle.
Some widget does not accept Bundles, so you may have too to override GWT css in the bootstrap html file.
I believe that you can hack the basic styles with jQuery or overriding CSS styles, but the responsiveness, topbar and other things, I believe thats is pretty impossible...
You can take a look at GWT-Bootstrap.
Hope it helps..