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');
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 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 would like to embed an iFrame in a React application.
Because of specific behavior of the external view being referenced in the iframe, I would like to disable everything with the exception of hover events, which must propagate through to the iframe.
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<iframe src="https://localhost:8022" height="600" width="800"></iframe>
</div>
);
}
export default App;
I've tried using the CSS property, pointer-events, in various ways, but have
not been successful. Any suggestions on how this can be done?
As of August 2019, this cannot be done I've determined.
Okay, just to state the problem right away, I have a situation where stylesheet B which is being loaded (or so I thought) AFTER stylesheet A, and should therefore be overriding A's styling because of cascading, is in fact being loaded into the browser BEFORE A. The order is wrong.
I have a simple React component structure as follows:
App
> Header
> Home
> Footer
In my 'index.js' I have the basic order of statements:
import './assets/theme/theme_specific/scss/style.scss';
render(
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute getComponent={lazyLoadComponent(Home)} />
<Route path="/resume" getComponent={lazyLoadComponent(Resume)} />
</Router>,
document.getElementById("app")
);
Here's the structure in App.js:
class App extends React.Component {
render() {
return (
<div>
<Header />
{this.props.children}
<Footer />
</div>
);
}
}
And at the top of Header.js I have the following:
import './Header.scss';
The Webpack loader that's processing .scss files is:
test: /\.scss$/,
loader: 'style!css?sourceMap!resolve-url!sass?sourceMap',
I've confirmed that there is no !important being used anywhere, and the styling itself is exactly the same.
What's happening is that "Header.scss" is being loaded FIRST, and 'style.scss' SECOND. In other words 'style.scss' is overriding the styles in 'Header.scss', versus the other way around as they appear in the code. The 'Computed' tab in Chrome inspector confirms this is the case.
Anybody have any idea what's going on here?
The CSS is imported in the order you specify. If you'd like your custom styling to have the highest precedence, put import './Header.scss'; beneath all the other imports.
Feeling very stupid now. I answered my own question just a few minutes after posting. #David L. Walsh above is correct.
The problem was that in 'index.js' I was importing the React component files before the CSS files (including 'style.scss' mentioned above).
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">