Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Interoperability with other libs

See original GitHub issue

Opening an issue as @jgoux faced an interoperability issue between styled-components and jss with Material-UI:

While I can use the insertionPoint with JSS,

<head>
    <title>JSS</title>
    <!-- jss -->
</head>

I can’t find any way to determine the injection order of styled-components. I have also noticed some other issue with css-modules. Would it make sense to provide an insertion point option close to what JSS is doing? It would be great to solve the issue that way:

<head>
    <title>JSS</title>
    <!-- jss -->
    <!-- styled-components -->
</head>

Version

1.0.5

Reproduction

https://codesandbox.io/s/zqr56w532x

import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';
import { MuiThemeProvider } from 'material-ui/styles';
import { MenuItem } from 'material-ui/Menu';

const StyledMenuItem = styled(MenuItem)`
 background-color: red;
`;

const App = () => <StyledMenuItem>test</StyledMenuItem>;

render(<App />, document.getElementById('root'));

Expected Behavior

UI capture d ecran 2017-05-31 a 23 11 20

Injection order capture d ecran 2017-05-31 a 23 12 24

Actual Behavior

UI capture d ecran 2017-05-31 a 23 12 53

Injection order capture d ecran 2017-05-31 a 23 13 18

cc @kof.

Issue Analytics

State:
Created 6 years ago
Reactions:12
Comments:21 (3 by maintainers)

Top GitHub Comments

5reactions

vohahacommented, Aug 11, 2017

@oliviertassinari What about this approach?

const StyledMenuItem = styled(MenuItem).attrs({
  className: "test"
})`
  &.test {
    background-color: red;
  }
`;

3reactions

designjudocommented, Jan 17, 2018

@PTaylour Great suggestion here! This ended up being the solution. You rock! I think the alternative would have been to enable comments in the webpack config via nanocss

I used this string in the head and it’s now inserting as it should.

<style id="insertion-point-jss"></style>

Top Results From Across the Web

Interoperability with other libraries - VexCL documentation

When Boost.Compute backend is used, VexCL is based on the core classes of the Boost.Compute library. It is very easy to apply Boost.Compute...

Interoperability with Other Units Libraries - GitHub Pages

Other units libraries can be easily integrated with mp-units via specialization of a quantity_like_traits for external quantity-like type.

Interoperability between Digital Libraries - ICS-Forth

A fundamental issue for digital libraries is interoperability: the capability of digital libraries to exchange and share documents, queries, and services.

Array Libraries Interoperability - Quansight Labs

SciPy only wants to play with NumPy and refuses to play with other libraries like PyTorch, CuPy, Tensorflow and JAX. All of them...

Interoperability Libraries - Innovision Medical Technologies

Interoperability software and connector libraries to embed in medical devices. Connect to the EMR, other patient records, consolidated displays, ...