For example if I have an albums.jsx file in which I wrote:
import ripple from 'material-ui/ripple'
then in my element I can use:
return <div className={ripple}><div>
So that this div will have ink/ripple effect. This can be done in Angular Material via a class name, so I imagine there should be a similar feature in Material-UI/react-md
You have to import it like this:
import TouchRipple from 'material-ui/internal/TouchRipple';
Then use in your component like this (TouchRipple is basically a higher-order component):
<TouchRipple>
<div>
MY RIPPLING DIV
</div>
</TouchRipple>
If you need to solve the problem with classNames instead of a HOC, I suggest to use react-materialize -> https://react-materialize.github.io/#/
Related
I found a couple of ways to import bootstrap into my project. I'm rather unsure if there is a best practice.
I installed bootstrap and react-bootstrap using npm.
Option 1: Import every component seperately
import Button from 'react-bootstrap/Button'
function App() {
return (
<div className="App">
<Button variant="outline-secondary" id="button-addon1">
Button
</Button>
</div>
);
}
vs. Option 2: Import everything
import * as bs from 'react-bootstrap'
function App() {
return (
<div className="App">
<bs.Button variant="outline-secondary" id="button-addon1">
Button
</bs.Button>
</div>
);
}
My guess:
Option 1 is leaner as it only imports the component I use. But is it the best way to use it? Especially when Prototyping out a quick idea it can get filled with imports quickly or can be a pain to import everything hand by hand.
Any advice is very welcome! Thank you!
Personally I would go with Option 2. Bootstrap's components names are very generic and could be confused with other components.
Importing the specific component from the library rather than importing everything improves the performance while fetching and rendering.
However,
You can also import multiple components from a single import statement
import { Form, Col, Button } from "react-bootstrap";
You can also use the default react-bootstrap syntax to import
It imports dynamically without naming the specific components
import * as ReactBootstrap from "react-bootstrap";
return (
<ReactBootstrap.Button bsStyle="success" bsSize="small">
Button
</ReactBootstrap.Button>
);
So, In terms of performance, multiple components imports or individual component imports are way better than the others.
You can just include the link to the CSS and JS bundle in the public/index.html
You can find the CSS link here -> https://getbootstrap.com/docs/5.0/getting-started/introduction/
Copy the CSS code and paste it into the head tag
You can find the JS bundle here -> https://getbootstrap.com/docs/5.0/getting-started/introduction/
Copy the JS Bundle code and paste it right on top of the end of the body tag. Like this 👇
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> //This is the JS Bundle
</script>
</body>
You can just use the bootstrap class names on className of the component which will be easier to refer on the bootstrap docs.
<div className="d-flex mx-2 bg-dark"></div> //Usage of bootstrap classes
There are default imports (option 1) and named imports (option 2). Generally, the main difference is that with option 1 you import only the component, not the whole library: https://react-bootstrap.netlify.app/getting-started/introduction/#importing-components
You should import individual components like: react-bootstrap/Button
rather than the entire library. Doing so pulls in only the specific
components that you use, which can significantly reduce the amount of
code you end up sending to the client.
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
I said generally, because you can set up your bundle tool for tree shaking. With tree shaking you remove everything, that is not used in your code, resulting in the same bundle size, as you would import only certain components directly via default imports.
I use option 2, because I like to clip all the imports from the same library. It's also easier for eyes to parse the imports IMO.
Anyone have suggestions about how to overcome the problem of styling and bootstrapjs and css files not working in react app and how to import bootstrapjs file in react component.
I have created a toggler navbar with bootstrap and using popover and bootstrap files not working
import React from 'react';
import SwiperDiv from './swiper';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<SwiperDiv/>
</div>
);
}
export default App;
index.js:1375 Warning: React does not recognize the classNmae prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase classnmae instead. If you accidentally passed it from a parent component, remove it from the DOM element.
You may have a typo on your DOM element
classNmae
try className
From your error message I'm guessing somewhere in your code (probably ./swiper) you wrote classNmae instead of className and that's what is causing your issue.
Also, in the code you posted you're closing a div tag inside the return statement without its opening tag present, so it's definitely going to throw an error. You should probably do:
return (
<div>
<SwiperDiv/>
</div>
)
add bootstrap's
link and scripts
inside root "public/index.html" directory if you've created react APP using create-react-app
I am new to React, I have some confusion related to CSS styling related to rwmc components.
I am just rendering two Button components on web page by importing it from '#rmwc/button' package. I am following this tutorial
https://jamesmfriedman.github.io/rmwc/buttons
I have also imported material design for this component like
import '#material/button/dist/mdc.button.css';
Now I have two buttons on my screens, for one of the button component, I have mentioned className property. In that class button color is just getting red which is working fine but I am wondering here, besides changing color of button, all other css defined in mdc.button.css are just getting applied to this as well, I don't know why is it happening so, Is this a correct behavior.
I am asking this because I have read here that
https://jamesmfriedman.github.io/rmwc/styling-theming
All of the components have the material-components-web classNames on them and you can add your own which means you are changing main class.
Any help will be appreciated.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
import { DrawerHeader } from '#rmwc/drawer';
import { Button, ButtonIcon } from '#rmwc/button';
import '#material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'
const MyComponent = props => (
<div>
<Button>Default</Button>
<Button className="myDrawerHeader">Default2</Button>
</div>
);
ReactDOM.render(<MyComponent />, document.getElementById('root'));
index.css
.myDrawerHeader {
color: red !important;
}
Output on the screen is coming this which I think is wrong. Why all other styles from .mdc are getting applied to second button, I have just changed color of it.
screen-output-now
I think the behavior here is correct. Both the buttons have material-components-web css className and what you are doing is, adding another class to it. You are not actually changing the main class, you are extending the css styles of the second button using another class.
It behaves underneath as,
<button className="material-components-web">Default</button>
<button className="material-components-web myDrawerHeader">Default2</button>
I agree with Vishmi Money, the behavior is expected. When looking at the source code of the lib you used, its appeared a comment for classname props,
https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js
/** Additional className for the button */
className?: string
So I think the idea is beside default classes you can define your own class and if you want to override some default behaviors then you can write it in your own class.
I am having hard time understanding how I should structer my project.
I am using react with material UI and css modules.
Problem is that god knows why, all styling from MUI loads at the bottom of the header same as css module styling.
After some research I found two solutions:
Use !important inside css modules which is terrible.
Changing the injection order https://material-ui.com/guides/interoperability/#css-modules
Problem with the second one is that it would be terrible tedieouse in a multi component project where every time you introduce a new component you have to load it manually as in the example. Am I missing something obvious? Do you have any ideas how to easier change the load order?
According to the Material-UI documentation, you should add a <StylesProvider/> component, which wraps your component tree.
import { StylesProvider } from '#material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Styled components can override Material-UI's styles. */}
</StylesProvider>
If injectFirst is set (and true of course), the Material UI style tags will be injected first in the head (less priority)
I think you may be misunderstanding something in the example. There isn't anything you need to do on a per-component basis to change the load order.
The steps are as follows:
1. In your index.html add a comment like <!-- jss-insertion-point --> into the head where you would like the jss CSS to be inserted.
2. In your index.js (or somewhere at or near the top of your rendering hierarchy) create the jss configuration to indicate the name of the insertion point comment:
import JssProvider from "react-jss/lib/JssProvider";
import { create } from "jss";
import { jssPreset } from "#material-ui/core/styles";
const jss = create({
...jssPreset(),
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
insertionPoint: "jss-insertion-point"
});
3. Wrap your top-level element in the JssProvider to put those configurations in play (no component-specific steps):
function App() {
return (
<JssProvider jss={jss}>
<div className="App">
<Button>Material-UI</Button>
<Button className={styles.button}>CSS Modules</Button>
</div>
</JssProvider>
);
}
I've created a CodeSandbox similar to the one pointed at by the Material-UI documentation except that this one uses the create-react-app starting point, so the dependencies are simpler.
In version 5 MUI changed the import and some components became deprecated.
By default, the style tags are injected last in the <head> element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
Not in the documentation, but the StyledEngineProvider component has an injectFirst prop to inject the style tags first in the head (less priority):
<StyledEngineProvider injectFirst>
<MUIThemeProvider theme={theme}>
{children}
</MUIThemeProvider>
</StyledEngineProvider>
I'm using [svg-inline-loader][1] to inline SVG Images in my React Application.
When I import an SVG, the webpack module passes it to the variable as an HTML string. I need to convert this string into a React Component so that I can pass additional props to it.
My current code looks like this
import SVGlogo from './logo.svg';
export default () => (
<a href="/" className="navbar-item is-purple" dangerouslySetInnerHTML={{ __html: SVGlogo }} />
);
This works fine but I need to pass additional attributes/props to SVGlogo. Is there a way I can do this elegantly without manually modifying the string and adding attributes to it.
I highly recommend to built an own non class component for your SVG stuff and then import it into the section / HOC component.
See my example here:
Greetings!