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">
Related
I have created a custom .scss file for Bulma with some custom colors I want to use in my app. They work in most Buefy components, except the Switch component...even though the docs say I should be able to use the type= attribute with my custom colors.
What am I doing wrong in importing the custom colors?
My bulma_custom.scss file
#import '../node_modules/bulma/sass/utilities/functions';
$mc-persimmon: #F65D2E;
$mc-persimmon-invert: findColorInvert($mc-persimmon);
$custom-colors: (
'mc-persimmon': ($mc-persimmon, $mc-persimmon-invert),
);
#import '../node_modules/bulma/bulma';
My main.js file
import App from '#/App.vue';
import 'buefy/dist/buefy.css';
import 'bulma/css/bulma.css';
import '#/bulma_custom.scss';
import '#/style.css';
etc. Vue.app etc.
My Switch component implementation
<b-switch type="is-mc-persimmon" :value="isOptedOut" #input="onToggleOptOut" :disabled="isLoading">
Opt Out
</b-switch>
In Chrome Devtools, the component's HTML
<label data-v-6e007ba7="" class="switch is-rounded">
<input type="checkbox" true-value="true" value="false">
<span class="check is-mc-persimmon"></span>
<span class="control-label">
Opt Out
</span>
</label>
In Chrome Devtools, the component's css - it's using buefy.css and didn't find the Bulma color
.switch input[type=checkbox]:checked + .check {
background: #7957d5; ## the Buefy default, NOT my color
}
I finally figured it out - instead of importing the buefy css file in main.js, I imported buefy in my bulma_custom.scss file. Somehow this way Buefy was able to overwrite the $form-colors with the additional custom colors instead of defaulting to the built-in ones.
GOOD: in scss file: #import "~buefy/src/scss/buefy";
BAD: in main.js: import 'buefy/dist/buefy.css';
I'm working on my portfolio website and I'm doing it with Gatsby. I've imported a Swiper component, precisely a CubeEffect slideshow.
As I have my background black, I would like to change the Swiper Shadow to red (by default is black) but I'm struggling to access to swiper-cube-shadow::before className, because is an own swiper's className.
I've added css style to the Swiper component, to the SwiperSlide component but I don't know how to access to the swiper-cube-shadow component that should be at the same level of the component and consequently to the className...
I cannot add a selector to a component that I don't know how to select, because is inside the Swiper component with is own name and If I create a new component with the same name will not modify the original component but just create a new one.
On the first link you have a picture of the HTML elements (I don't have the privilege to attach an image yet) with the <div class-name:'swiper-cube-shadow'> that I'm trying to customize.
<Swiper css={css `
[css styles]
`}
<SwiperSlide css={css`
[css styles]
`}>
<Dado2/>
</SwiperSlide>
</Swiper>
class-name:swiper-cube-shadow::before
I have a Gatsby app with scss.
At the moment I have the following :
import React from "react";
import styles from "./mosaic.module.scss";
import Tile from '../tile/tile';
const Mosaic = (): JSX.Element => (
<section className="wrapper style1">
<div className="inner">
<h2 className="major">Smaller Projects</h2>
<p>Here under follow minor projects, often unfinished; I show them anyway because they helped me widen my experience. :)</p>
<section className={`${styles["features"]}`}>
{[0,1,2,3,4,5,6].map(e => <Tile key={e}></Tile>)}
</section>
</div>
</section>
)
export default Mosaic;
If I do not import class from the module like this className={${styles["features"]}} it will not work.
But as you can see some className still work with className="inner"
This is because under gatsby-browser.js I imported some global css like this
import "./src/styles/global.css"
The problem is, it's really confusing to know when a class should be called with styles or in the normal way.
Is there a way to just use the default way for everything ? or opposite ?
If you want regular global CSS, rename your file to mosaic.scss, import the file, and then apply your classNames as usual.
import "./mosaic.scss";
...
<section className='features'>...</section>
When you use the *.module.scss extension, you are actually telling gatsby-plugin-sass that you wish to use CSS Modules.
If you wish to use CSS Modules, then you have to do:
import styles from "./mosaic.css";
...
<section className={styles.features}>...</section>
or
import {features} from "./mosaic.css";
...
<section className={features}>...</section>
Edit: After your clarification in the comments, I don't think gatsby-plugin-sass or CSS Modules do what you want. You might have better luck looking for another tool to handle your css (eg stylable.io)
I created a custom modal, it also contains some SCSS.
In some cases, I need to use the modal twice (for different use case). Does Vue import the CSS twice or does Vue know I already imported the CSS?
<template>
<div>
<p-modal></p-modal>
<p-modal></p-modal>
</div>
</template>
Here, I am trying to import plugin and it's css like this
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
In this case css won't load.
When i do like this:
import IntlTelInput from 'react-intl-tel-input';
import stylesheet from 'react-intl-tel-input/dist/main.css';
<div>
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</div>
Now css works but still css can't load image.
Can you guys please help me on this: why css is not being loaded in direct import??
Try just -
import './main.css';
You can also use the required module -
require('./main.css');
const style = require('react');