Currently I'm using google fonts icons in my project, but I want to use also FAS5 Icons
I'm using this vuetify configuration, but the documentation doesn't say anithing about this.
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from "vuetify/lib/util/colors";
import '#fortawesome/fontawesome-free/css/all.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.use(Vuetify);
export default new Vuetify({
theme: {
...
},
icons: {
iconfont: 'fa'
}
});
This is a clumsy example of what I'm doing. But I'm afraid this is bad practice and may create bugs or errors
<v-btn icon #click="$vuetify.theme.dark = !$vuetify.theme.dark">
<v-icon>nightlight_round</v-icon>
</v-btn>
<v-btn icon #click="$vuetify.theme.dark = !$vuetify.theme.dark">
<v-icon>fa-moon</v-icon>
</v-btn>
Is there a proper way to achieve this?
As mentioned in this vuetify issue:
You need to install all fonts you need or add links to CDNs, iconfont only specifies which icon set will be used for default Vueitfy icons
So there is no way to load multiple fonts on initialization.
I would keep the mostly used font as default in the Vuetify config and load the other one as needed. In the Vuetify docs the same implementation of FA5 as yours is shown, so I would say you've done it correctly.
Related
I am facing problem with external css files on my react project. I am using material UI components. In the react components folder I created css file for each components but they are not loading when i hard reload the site.
I wanted to use external css rather than styled components or material ui style syntax.
Just import the css / scss file in your component and make sure you've added the classes for the elements.
If you are looking a more generic option you can import your style.css file in your main App.jsx (if you call it "App.jsx") file. Then you just use the className and will have access to your css.
App.jsx file
import './style.css'; // Your path to your style.css
function App() {
return (
<div>React app</div>
);
}
export default App;
I'm trying to add a dark-mode in my project. Without React, I would have just targetted the DOM element which triggers the switching of the mode and linked my custom dark.css file instead of index.css which happens to be my pre-dominant CSS file. But here in React, it would take the latest file I'm importing for my CSS. I'm a beginner in React. So please pardon me if this doesn't make much sense. Thanks in advance!
Here's my code
import ReactDOM from 'react-dom';
import './index.css';
{/*import './dark.css*/}
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Yes there is a way. You can use React.Lazy and React.Suspense.
For example this article explains how use them.
There's nothing wrong with importing dark.css every time, but its styles should be applied conditionally. What I mean is, all the styles for dark mode should be wrapped in a CSS class like .dark-mode. Then, when user turns dark mode on, you would apply this class to body tag or to the top-level React component, and remove it when dark mode is turned off.
This will be a much easier solution that trying to work with lazy loading.
For anyone viewing this, I would strongly recommend using useContext. It makes it very easy to pass your theme without using props to all of your children. They even have an example of implementing dark/light theme like you want: https://beta.reactjs.org/reference/react/useContext#usage
I'm using Reactjs and Material Icons. I want to get the filled version of the icon.
But instead, I am seeing the outlined version.
import import {Icon} from '#material-ui/core';
...
<Icon>mail</Icon>
What am I doing wrong? And how can I get the filled version using the <Icon>foo</Icon> method?
I'm trying to apply separate styleSheets for every child component by importing different styleSheets in different components but fails to achieve this as styles are being overwritten.
Sample Code: Stackblitz
childa.jsx:
import React from 'react';
import "./childa.css"
export default () => <h1>Child A!</h1>;
childa.css:
h1 {
color: blue;
}
childb.jsx:
import React from 'react';
import "./childb.css"
export default () => <h1>Child B!</h1>;
childb.css:
h1 {
color: red;
}
This is just a sample code. Need solution for a project having large styleSheets.
Based on your clarification in one of your comments:
The thing is I'm converting a project from angular to react and all
the css is already written so I can't use inline style. Is there any
way in which I don't have to rename all the css classes in all the
stylesheets?
Short ans: You can't achieve that as of now.
This article explains all the different ways to style react components. In your case, the best that you can do is use css modules and rename generic classes like h1 to .h1.
Check this great article about css modules: Modular CSS with React.
Note: css modules are not available in create-react-app. If you must use it here's an
article on how to use CSS Modules with create-react-app.
I think this is caused by ther order of the imports.
In your parent component you have something like
import React from 'react'
import ChildA from './ChildA'
import ChildB from './ChildB'
This means that in the compiled code you'll have the two stylesheets imported one after the other, and the second h1 rule will overwrite the first
You should use classes for your components, or use inline style
Importing a css does not wrap it in the scope of the component is just a straight import into the DOM. In order to mantain a separation of components styles you have to approach with another solution, as styled-components.
This may not work for your entire application, but I fixed it by applying a class to the element (.childA and .childB). This solved the problem.
export default () => <h1 className='childB'>Child B!</h1>;
I use react-bootstrap, but I want to modify some of the elements, so I wrote my own custom.css. However it doesn't make any changes (only when I put !important, but the file is so large so it's not a good option).
import {MenuItem, Nav, Navbar, NavBrand, NavDropdown, NavItem} from "react-bootstrap";
import {LinkContainer, MenuItemLink} from "react-router-bootstrap";
import '../assets/css/custom.css';
This is what I did so far.
When are you importing the Bootstrap CSS? I have an app which successfully uses Bootstrap with some overrides, which does this at the top of its index.js:
require('bootstrap/dist/css/bootstrap.min.css')
require('./bootstrap-overrides.css')