I am using selecttreejs npm module and I am trying to import its css style in my polymer3 application, it seems like its not loading completly.
It looks like this, overlapping with background text. How can I import the external css to polymer 3 app.
import { Treeselect } from 'treeselectjs';
import treeselect from "treeselectjs/dist/treeselect-js.css";
let myCSSLiteral = htmlLiteral(treeselect);
class WorkspaceSelector
extends PolymerElement {
static get template() {
return html `
<style>
${myCSSLiteral}
#workspace-select {
width: 100%;
}
.sciome-select {
font: 400 16px "acumin-variable-concept";
padding: 5px;
}
</style>
Related
I'm new to react and I have a quick question about styling imported components. I made a basic Title component that simply outputs the props passed. My Title.js file:
import React from 'react';
import '../App.css'
class Title extends React.Component{
render(){
return <h1>{this.props.prop}</h1>
}
}
export default Title
I'm using it in my App.js file and trying to style it via a className
import React from 'react';
import Title from './components/Title'
import './App.css';
function App() {
return (
<Title className = 'title' prop = 'Title!'/>
);
}
export default App;
my css:
.title{
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
margin-top: 100px;
padding: 20px;
border: solid black;
}
This does not works, even if I apply an inline style to the Title tag. However it does works when I apply the className to the h1 tag within the Title.js file. Is it because everything written within the Title tag is just passed as a prop? If that's true how are third-party library components styled? Any help is much appreciated!
In order for this to work the way you want to, you need to pass the className prop form your Title component to the h1 inside it:
class Title extends React.Component{
render(){
return <h1 className={this.props.className}>{this.props.prop}</h1>
}
}
I am in the process of learning React while following along a tutorial, I ran into a problem than I can't seem to get around. I am loading the .css file in my index.js file; however, the css is not being applied. The css file does exist and is in the correct location. In fact, when the web page is up, making a change to the css file triggers a page update (so I know it's being loaded).
My index.js:
import React from "react";
import ReactDOM from "react-dom";
import Main from "./main";
import "./index.css";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
index.css:
body {
background-color: yellow;
padding: 20px;
margin: 0;
}
h1, h2, p, ul, li {
font-family: sans-serif;
}
ul.header li {
display: inline;
list-style-type: none;
margin: 0;
}
ul.header {
background-color: #111;
padding: 0;
}
ul.header li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
padding: 20px;
display: inline-block;
}
.content {
background-color: #FFF;
padding: 20px;
}
.content h2 {
padding: 0;
margin: 0;
}
.content li {
margin-bottom: 10px;
}
main.js:
import React, { Component } from "react";
import {Route,NavLink,HashRouter} from "react-router-dom";
import Home from "./home";
import Stuff from "./stuff";
import Contact from "./contact";
class Main extends Component {
render() {
return (
<HashRouter>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</HashRouter>
);
}
}
export default Main;
Using different browsers, clearing cache, etc. not solving the problem. Thanks for any help.
Found the issue. I copied the styles from the website which created a weird hidden character in front of the style properties. Removed those characters and all worked as designed.
I have a simple React App, using Redux's Provider to wrap my App component.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import registerServiceWorker from './registerServiceWorker';
const MainContainer = styled.div`
margin: 0;
padding: 0;
height: 100vh;
background-color: red;
`;
ReactDOM.render(
<MainContainer>
<Provider store={store}>
<App />
</Provider>
</MainContainer>,
document.getElementById('root'),
);
registerServiceWorker();
However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the App content goes to the edge of the screen?
That's the default styling of your browser. You could use something like Normalize.css, or simply remove the margin and padding of the body yourself.
body {
margin: 0;
padding: 0;
}
You can do this with injectGlobal.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
Thanks for the answers, but I was looking for a Styled Components specific answer.
Turns out that Styled Components has a helper method, injectGlobal, which can override the global body tag.
Using this, one can set the desired properties – in this case, no margin / padding. So, adding the following to index.js solves the issue.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
For styled components v4 and onwards use createGlobalStyle instead:
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
Styled Components FAQs
In your "App.css" write this :
body {
overflow-y: hidden;
}
That's working for my home page.
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.
I'm working on a create-react-app project, which I hooked SASS to, using these instructions: https://github.com/facebook/create-react-app
Then, in my source, I created a style folder with a partials folder and an index.scss. Inside the partials folder, I have a firstComponent.scss file. I imported the scss from the firstComponent file into my index.scss. The styles are being successfully imported into my index.css file. However, they are not being rendered on the browser. Why is this?
here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './style/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
here is my index.scss
#import './partials/_firstComponent';
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
here is my firstComponent.scss
.firstComponent {
background-color: 'red';
}
here is my index.css
.firstComponent {
background-color: 'red'; }
body {
margin: 0;
padding: 0;
font-family: sans-serif; }
You will need this line instead
require('./style/index.scss');
NOT
import './style/index.scss';