The stylesheet is really simple so I don't know what could mess around the result. I checked the style in the "elements". It seems that I cannot overwrite "display: block" in user agent stylesheet even though I used "!important".
import React from "react";
import ReactDOM from "react-dom";
import "./styles.less";
function App() {
return (
<div className="App">
<div className="hide">Hello CodeSandbox</div>
</div>
);
}
stylesheet
.App {
font-family: sans-serif;
text-align: center;
.hide {
display: none !important;
}
}
link with the environment:
I expect "Hello CodeSandbox" to disappear.
Create react app 2(CRA2) supports SASS out of the box.
I assume that officially the CRA2 does not support the LESS. So if you needs exactly LESS you can use react-app-rewired. This package rewrites webpack configuration without ejecting.
None of your styles get applied, and this is because the default codesandbox template (I guess, based on Create React App) does not support less.
It is a bit misleading, because it does not throw an error, but what it does is actually import the file as plain text, without setting it as style.
Two ways to see this, is that you can important the actual text:
import less_text from './styles.less';
console.log('less_text:', less_text);
Which will logs the contexts of the less file, without transpilation even.
What you could do for now, as I don't know how to use a template that supports less, is to change it to css for now. If you move .hide { ... } to the root of the css file, and import it as import 'styles.css' your styles do get applied :)
I think the problem is that you are missing less processor. By default browser does not understand less and if you use webpsck then you need loader for it
You need a less loader. Something like this https://medium.com/#joseph0crick/react-css-modules-less-webpack-4-a50d902d0a3
Related
On one of the doc/*.md pages in my documentation website I'd like to be able to have a javascript tree view thing. https://github.com/storybookjs/react-treebeard seems like it'd work well but it's not entirely clear to me how I might incorporate this javascript into one specific page.
I tried to copy the sample javascript from the Quick Start section into the specific *.md file, in a <script></script> tag, but I got a "SyntaxError: Cannot use import statement outside a module" error in the JS console.
I then took the import's out of the *.md file and put them at the top of website/siteConfig.js:
import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import {Treebeard} from 'react-treebeard';
Any ideas as to where I should put these import statements?
NOTE: This answer for v2 of docusaurus.
As per docusaurus documentation Introduction section, docusaurus is powered by MDX.
Write interactive components via JSX and React embedded in markdown
This allow developers to write JSX inside Markdown files and use react components same way they are used in React projects, so all you have to do is to add react-treebeard as a dependency in your project and then inside the doc/mark_down_file.md import and use treebeard same way in the example you added.
I already have a codesandbox.io project set to use treebeard library, you can see how I did it here or live view
and here is the snippet where I imported and used Treebeard:
---
id: treebeard
title: Tree beard
---
import TreeView from "../src/components/TreeView.js"
You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
----
<TreeView />
----
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
I can write **Markdown** alongside my _JSX_!
Check the codesandbox for code, you can find the code for MDX file in docs/treebread.mdx and Treebread code in
src/components/TreeView.js
In an app derived from react-boilerplate using styled-components 3.3.2 I am trying to display SVGs in pseudo-classes like this:
import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'
const Tab = styled.div`
&:after {
content: url("${arrowUp}");
position: relative;
}
&.active:after {
content: url("${arrowDown}");
}
`;
However, the first use of content: url("${...}") breaks all following style definitions in the block.
In this case &.active:after styles are ignored, while position: relative in the &:after definition is parsed.
The SVGs look properly formatted and they do get url-encoded. However, after much testing, the part in the SVG that breaks the styling seems to be the parentheses in transform="translate(...)" attributes, which do not get url-encoded. Should they be?
If I assign the SVGs in background definitions instead of a pseudo-class content everything works as intended, so it doesn't seem to be a problem with the general setup.
Is this a bug? If yes where? How can I work around this (except using the SVGs in backgrounds)? Can I circumvent the data parsing and plainly insert the SVG file URL somehow (asking as a Webpack / React newbie)?
I'm trying to slowly introduce Styled-Components into my existing codebase which relies heavily on global SASS variables (partials imported into a main.scss).
How do I reference the SCSS variables? The following doesn't work:
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: $color-blue;
`;
export default Button;
Am I approaching this from the wrong way?
I wrote up an article about solving this very issue. https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8
Essentially, you can use the excellent sass-extract library along with sass-extract-loader and the sass-extract-js plugin to bring your global Sass variables into your app as a theme object.
Pardon me if this is an old question but I thought I chip in on how I use CSS variables for both my .scss and styled-components when the need arises.
Basic Usage:
Declaring a global variable (preferably at _variables.scss)
:root {
--primary-color: #fec85b;
}
Using the global property:
.button {
background-color: var(--primary-color);
}
or
const Button = styled.button`
background-color: var(--primary-color);
`;
Please pay attention to the double line --.
Variables play a very important role in .scss or .sass, but the functionality cannot be extended outside the file.
Instead, you have to create a separate .js file (For example: variable.js) and define all your variables as an object.
I recommend using the ThemeProvider component. I'm also moving away from sass and towards styled components. The Theming with styled-components uses React's context api and is quite nice. Check out the this documentation Styled Components Theming.
I'm using create-react-app and have read bad things about inline styles so I wanted to use css modules however they aren't supported by create-react-app at this time. Can I literally just use plain old css in one big file? Also with this approach how do I style a react component. For example I have a component and I give it a class name: <card className="cardStyle" />. Why does this not work? I want to bed able to position it just like I would a div.
it's certainly possible, you may have plain old CSS classes in a style.css somewhere, but you'll have to make sure your app includes it,
e.g. have in your App.js
import './style.css'
The standard way is to do the following;
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render() {
// You can use them as regular CSS styles
return <div className="Button" />;
}
}
See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet
Using CSS Modules might be better way:
CSS Modules have .module.css in their file name, like styles.module.css. Naming it so is important it avoids serious issue in plain CSS when having same CSS class names in different CSS files.
File : styles.module.css
.myClass1 {
background-color: red;
}
File : App.js
import styles from'./styles.module.css';
<div className={styles['myClass1']} >
some content
</div>
By default supported by Create React App - https://reactjs.org/docs/create-a-new-react-app.html
This can done using simple steps
npx create-react-app my-app
cd my-app
npm start
Links:
. https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
. https://www.freecodecamp.org/news/how-to-style-react-apps-with-css/
If you want to use normal css but want more flexibilities like props to css, and open to install more dependencies then alternatives are:
. https://emotion.sh/docs/introduction
. https://styled-components.com/
Some are migrating styled-components to emotion, so may be emotion is better way to start with.
See https://storybook.js.org/blog/541-components-from-styled-components-to-emotion/
How can I use my own class names when using CSS and Style loaders? I'm using React and i often get confused with all the class names and the related components. If it is not recommended to keep the class names, how can I organize my code in a manner that it don't get messy?
You can use normal classNames and then import the relative .css file that has the style for those classes. Something like this:
MyComponent.js
...
import '/path/to/css/style.css'
...
render() {
return(<div className="MyComponent">Hello</div>);
}
...
style.css
...
.MyComponent {
width: 100px;
background-color: red;
...
}
...
And this would work just fine, with this approach though you are in charge of naming your classes and making sure there are no collisions and everything is named properly (you can then follow BEM techinque or others as you prefer).
Otherwise there are other approaches that I am not gonna explain into details because the relative docs are great and don't need any addition.
You can use Css Modules or Styled Components. There is also this article that has a good overview of these methods and can help you out make a final decision.