Importing a css file in bootstrap react.
For navigation, an additional header.css file will be used.
In bootstrap without react I embed the file as follows:
<Nav class="navbar-abc-header navbar-default navbar-fixed-top">
In bootstrap react this entry does not work.
render ( ) {
return (
<Navbar navbar-abc-header fixedTop>
...
);
}
I can use <Navbar inverse fixedTop> but not my own css file.
As we the css file included right?
You need to use className in reactjs. class in a reserved keyword javascript hence you cannot use the same for defining CSS classes.
<Nav className="navbar-abc-header navbar-default navbar-fixed-top">
Related
I have added my own classes along bootstrap using backtick butt its not working.
e.g
<nav className=`navbar navbar-expand-lg navbar-light bg-light ${classes.navStyle}`></nav>
Here' the extra class(classes.navStyle) is not applied.
Kindly tells possible solution for (component-level-css) when using bootstrap in Reacjs Projects
Possible solution for component-level-css when using bootstrap in project
I'm upgrading my company AngularJS project to Angular 8 thanks to ngUpgrade. So I have a hybrid application with both angularjs and angular components. I am also using an angular material template that provides SCSS files for both angular and angularjs.
My problem is that I want to only use the ajs theme on ajs component and the angular theme on angular components (and they can also be nested).
I searched a way to apply only one global css when a specific class is applied and switch to another global css when another class is applied.
I cant really do css lazy loading in this case
Lets assume my app code looks like this :
<div class="theme-1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
I want to be able to switch between theme when a class theme-1 or theme-2 occurs.
you should use BEM approach for this and your code should be like this.
.theme-1 {
&__div1{...}
&__div2{...}
...
}
.theme-2 {
&__div2{...}
...
}
.theme-1,
.theme-2 {
/* Common Css */
&__div1{...}
&__div2{...}
...
}
so you can write classes like this now
<div class="theme-1__div1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2__div1">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1__div2">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
for BEM you can refer this link - http://getbem.com/naming/.
If you are still not clear, I can provide same code also.
Let me know if you have any doubt.
The solution in my case was to use encapsulation: shadowDow on my angular components. It allowed me to reset theme1 css and use only theme2 css.
I had t do lots of css tweaks (some angular material features doesn't work with shadowDom...) and an cant switch back to theme1, but it has been the best solution so far.
If I break down a navigation menu (navbar) into components such as this:
<div class="navbar">
<app-navbar-brand></app-navbar-brand>
<app-navbar-menu></app-navbar-menu>
</div>
or:
<div class="navbar">
<div class="navbar-brand">
<!-- navbar-items -->
</div>
<div class="navbar-menu">
<div class="navbar-start">
<!-- angular components -->
</div>
<div class="navbar-end">
<!-- angular components -->
</div>
</div>
Some padding and other properties seem to work incorrectly in the menu.
If I keep the entire navbar in one component, I don't see this problem.
Any idea what I'm doing wrong in Angular? Or is there something i've missed? It looks like the SASS is loaded in a weird way, but I cannot figure out why this is.
I ran into the same issue when using Bulma with Angular. The problem is because Bulma is built entirely using Flexbox. Angular component generated (pseudo) HTML tags, which are not using flexbox. I tried adjusting the component CSS style (i.e display, and width properties) seem to help, but not perfect. Hope that helps.
In my app.js:
[import React, {PropTypes} from 'react';
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
const TopHeader = (props) => {
return(
<div>
<Navbar color="faded" light>
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Nav className="pull-xs-right" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
}][1]
It renders the elements but without any CSS. I have tried this in firefox and chrom.When I go to inspect element, there aren't any CSS classes. I don't have any custom CSS either. What could be the reason for plain HTML elements getting rendered without any CSS?
Edit:
As suggested, I added :
import 'grommet/scss/vanilla/index';
for gommet components in my js file.
and get this error:
gommet scss file import error snapshot
Edit:
ERROR in ./~/css-loader!./~/sass-loader!./~/grommet/scss/vanilla/index.scss
Module build failed:
#import "inuit-defaults/settings.defaults";
^
File to import not found or unreadable: inuit-defaults/settings.defaults
Parent style sheet: /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss
in /home/simran/webocity_POS_react/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1)
# ./~/grommet/scss/vanilla/index.scss 4:14-102 13:2-17:4 14:20-108
Looking at the source code of Reactstrap, Reactstrap is just a thin layer of abstraction over Bootstrap 4 elements that helps you render markup that conforms to Bootstrap 4 class names and styles. It does not include any CSS by default.
You will have to include Bootstrap 4 CSS on your own either by installing Bootstrap 4's npm package or using their CDN-hosted CSS.
If you are using Webpack for your project, you can refer to my example on the version to install and the importing instructions in this repository: https://github.com/yangshun/react-redux-starter/blob/master/package.json#L46
The library you are using only provides the components themselves, it doesn't import the bootstrap css library for you. You would need to include bootstrap 4 css stylesheet.
If you have an index.html you can just add this in the head of the document.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
I am a new developer with roots toolkit. How to edit default roots class css wordpress? My question is about the classes like wrap,content,main etc. I also found some default classes for header,footer,aside etc. In which less file I can found this css for editing. Are these classes also the part of bootstrap styles and variables in roots kit?
You edit those in the base.php file. Line 15-17:
<div class="wrap container" role="document">
<div class="content row">
<main class="main" role="main">
These are not Bootstrap styles, but more of classes that you can utilize if you want, or delete altogether. By having a wrap there, you can target everything in the initial container, rather than any other container in the site. Same goes for content, or main.