how to use common less variable with styled component?

styled components css variables
styled-components nested elements
styled-components css prop
styled-components best practices
styled-components hover
next js styled-components
styled component conditional
styled-components hooks

Say I have a styled component, in index.jsx

import './index.less';
class Input extends React.Component {

and my index.less files looks:

   color: @whiteColor;

This index.less has to work with the mixin.less that imported in the root project.

So my question is, even though I imported the mixin.less, it prompts variable @whiteColor not found. Any idea to solve this?

I have felt the same pain, why isn't my styled component resolving less variables? The syntax is simple JavaScript, just do:

   color: ${props => props.whiteColor};
   // or
   color: ${props => props.theme.whiteColor};

But, at my company, we had thousands of less components, and we really thought that the less syntax was cleaner and definitely faster to write. We developed Styless.

It is a babel plugin that parses less and generates javascript code. Add it to your .babelrc file.

  "plugins": ["babel-plugin-styless"]

Then, we can do!!

const Input = styled.input`
    @highlight: blue;                           // can be overwritten by theme or props
    background: darken(@highlight, 5%);         // make green darken by 5%

Check here to see how to use the theme provider and load variable from your index.less!

How to convert less to styled components, How to convert less to styled components. Step 1: Set a Global Style for all global stylesheets. Step 2: Move all of your variables into a theme style. Step 3: Break down the less components into chunks of styling that you can attach to react components. Step 4: Convert any variables referenced in the less stylesheets. As at the time of writing this, styled components have no support for lighten() or darken() SASS functions that are used to tweak a specific color in a way that still returns a complementary color. CSS variables aren’t yet supported in Opera Mini and Samsung Internet v4 (version 6.2 fully supports it though).

You can try import the mixin.less in index.less

How to use media queries with styled components, (max-width: 768px) { flex-direction: column; } `; If you want a more involved example with defining different device sizes, continue below. Then, when we use one of these variables, styled-components will do two things. First, styled-components will “replace” our custom components with correct elements. So, rendered code will contain header inside a div .

I have been trying the same than you.

But then I thought.. it is that what I really want? Because styled-components propose a different approach to having a modular structure for your styles. Check theming, is amazing powerful. Because in styled components you define the variables with javascript.

And if you want color manipulation like less, sass, you can check

Its like forgetting about less, and sass and moving it to a new style modules.

Still, if you want to keep your defined style classes, you can do that:

class MyComponent extends React.Component {
  render() {
    // Attach the passed-in className to the DOM node
    return <div className={`some-global-class ${this.props.className}`} />;

Check the existing CSS usage from docs:

Styled Components: To Use or Not to Use?, Commonly asked questions about styled-components. In general, always use the css helper when composing styling partials to be module is a dependency in more than one package (this one is more or less the same as the previous one​) When you use argument destructuring, any variables pulled out of the props  Since we have some variables in our Styled Components styles, we can go ahead and set them up here too. To do this, create a file called _variables.scss in the Sass file for our styles. Inside of the _variables.scss file, add the following code.

Basics, Progressively migrating your app from Sass to styled-components seems daunting, but Let's look at a common example, the Button component. By using these variables in our components we are essentially applying a  There are four different options to style React components. All depend on your personal preferences and the specific complexity of your application. If you want to add just a few style properties, then inline styling is the best option. When you want to reuse your style properties in the same file then style-component are perfect.

FAQs, The idea of writing a component once, then using it anywhere is efficient and follows Styled Components is a library that allows you add CSS styles to a React The call-to-action on it should be large but with a bit less padding. Admittedly this doesn't play too well with the current extremely popular MVC architecture. import styled from 'styled-components' const Button = styled.button`` import styled from 'styled-components' const Button = styled.button`` This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a tagged template literal.

Getting Sassy with styled-components - styled-components, Today we will be covering a few popular methods to style our React JS I will be using Styled Components in this post, although I'd suggest checking out Inside of the Card variable, we can also drop in media queries to make If you have used sass or less, you are already familiar with this concept. External CSS and styles outside of the component. In styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the styled-jsx/css library. styled-jsx/css exports three tags that can be used to tag your styles: css, the default export, to define scoped styles. to define global

  • that's not what i m aiming for, I dont want to import mixin.less in every component
  • Maybe you can config your webpack config, add the mixin.less to entry.