I am working in a project with react and my client wants me to have a button to toogle between Bootstrap and Foundation.
I have checked some options and I came to the conclusion that it is best to use hooks to manage each of the state, but I don't know how to import them correctly.
const theme = (mode: string) =>
mode === "dark"
? "bootstrap/dist/css/bootstrap.css"
: "foundation-sites/dist/css/foundation.min.css";
export default theme;
import theme from "./theme/experiment.js";
ReactDOM.render(<App />, document.getElementById("root"));
I expect React to import the correct theme base on the value of "mode"
You can import css in your virtual DOM in react component.
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css" />
That means you can change href attr by using state.
<link
rel="stylesheet"
type="text/css"
href={this.props.isBootstrap ? "bootstrap/dist/css/bootstrap.css" : "foundation-sites/dist/css/foundation.min.css"}
/>
Of course you can change your css by state or props.
Related
I am trying to use the Icon class from Material UI v5, I added the following to my index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
and then I use
import { Icon} from '#mui/material';
<Icon color="inherit">file_download</Icon>
But My icons still dont show
You can try to change the import path to import Icon from '#mui/material/Icon';
I finally managed to it working by adding all the Icons in my index.html file
From
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
to
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
I Think some icons dont work if you dont specify all of them in the stylesheet
I'm using FontAwesome inside a React App and TypesScript(created with react-react-app), but the icons aren't showing yet I followed the documentation's guide step-by-step.
Importing icons globally (index.tsx)
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons';
library.add(faCheckSquare, faCoffee);
Using the icons in my component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export const Home = ()=> {
return <FontAwesomeIcon icon='coffee' size='lg'/>
}
What is happening?
The below screenshot shows where the icon is supposed to be next to view price changes but it's not visible. What am I doing wrong? Thanks in advance.
Most probably Css of font-awesome is not added
try adding this in your index.html file.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
I have a multi language web project made by React.js & typescript and want to using bootstrap 5 CSS.
The problem is I want to dynamically change bootstrap CSS link on head section depend on language (ltr or rtl).
This link in public/index.html file:
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
...
</head>
convert to this dynamically:
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
...
</head>
After changing language I want to modify CSS link for rtl or ltr.
I'm using method on rout and successfully changing HTML dir but looking to modify with React.js & TypeScript.
Is there any solution for doing this?
You can do this by using ReactHelmet.You can create a StyleSheetUrlSelector Component. Then based on your criteria, you can render whichever stylesheet you want to render.
import React,{ FC } from "react";
import ReactHelmet from 'react-helmet';
interface ICssSelector {
ltr:boolean;
}
const CssSelector:FC<ICssSelector> =(props)=>{
const {ltr} =props;
return(
ltr === true?
<ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.ltr.css"}]
}/>
: <ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.rtl.css"}]
}/>
);
}
export default CssSelector
Im wondering about the best way to import svg image to be used as favicon in react
i have following code, which works:
import { favicon } from './static/favicon'
<link href="${favicon}" rel="shortcut icon" />
But here, favicon icon is exported const from .ts file:
export const favicon = `
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...0Y/QTN1SKbITsFi0AAAAASUVORK5CYII=
`;
I was wondering if i can somehow just use .svg file and export that to be used?
if i try to do:
import favicon2 from './static/favicon.svg'
<link href="${favicon2}" rel="shortcut icon" />
i will get function%20SvgFavicon(props)%20%7B%20%20return%20/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[ error in the console.
you can have a customizable icon with this library
https://github.com/oblador/react-native-vector-icons
I'm a newbie learning React. As the next phase of my learning, I need to learn how to style React. From previous experience, the steps I need to take to style my React app are:
Add Reset CSS
Implement a Grid System
Implement common styles for items like (buttons, headers)
Implement specific styles per component
Within the React world it's challenging to find a good jumping off point to tackle the above, so I'd love some advise to point me in the right direction.
Is styled-components most popular thing to do in the React world at the moment for all the 4 items listed above? If not, what do you recommend I start learning to handle the items mentioned above.
If you are starting with React, I'd not go with something deep like styled-components without first understanding the problem styled-components is trying to fix.
Your first approach should be as basic as just add one or more <link>s to your .css files (e.g. reset.css, grid.css, component selectors in it etc.) and use the proper classNames props in your components:
// main.css
body {
// ...
}
// MyToolbar.css
.MyToolbar {
// style for a MyToolbar react component
}
in your html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link rel="stylesheet" type="text/css" href="MyToolbar.css">
As your app grows, you will find hard to maintain this <head>, so you would benefit from a more modular approach.
For example, your next step may be to import your CSS from javascript instead of using <link> in your header:
// App Component
import React from 'react';
// import globally used styles
import './styles/reset.css';
import './styles/main.css';
export default class App extends React.Component {
// snip
}
To import CSS files in JavaScript, you need to use a module bundler like webpack to handle those imports statements. Start reading here: https://webpack.js.org/guides/asset-management/#loading-css. Doing this way you won't need to manually the CSS files in <head>.
In fact, you will be able to import your CSS from your components:
// MyToolbar.js component
import React from 'react';
import './styles/MyToolbar.css';
export default class MyToolbar extends React.Component {
render() {
// render your component here
}
}
Once your app grows, you may want to experiment with other solutions, e.g. styled-components.