Overriding about styled-components

[mxstbr]

You need to attach the class:

function Block(props){
 return <div className={props.className}></div>
}

styled-components injects a class with the given styling. If you don't attach it to a DOM node, you're not attaching it a DOM node, so it can't be in the DOM!

[davibe]

would it be possible pass the desired className to the styled function ? Maybe this is more a feature request.
i.e.

const MyComponent = () => <div className="my-component"> ... </div>
module.exports = styled(component, {className: 'my-component'})`
    ...
`

I don't like that my component has to behave (attach the custom className) as styled wants it to. I think the component should be agnostic.

[davecyen]

@mxstbr you're right. After some further research, confirmed there's no way to override inline-styles without using !important. There's an ongoing debate amongst the material-ui community about this. Anyways, thanks for the help.

[coffenbacher]

Is there a way to automatically apply !important to all styles? This can be useful for making widgets in conjunction with cleanslate.css

[mxstbr]

This works.

[haikyuu]

@mxstbr What about :

function Block(props){
 return <div></div>
}

import Block from '@components'
const styledBlock = styled(Block)`
 background: steelblue;
`

it doesn't work, shouldn't it be working? 😕

[haikyuu]

Thanks. It's in the docs too.

[haikyuu]

That would make it easy to (automatically) show human-readable classNames in dev mode. It would make chrome inspector more approachable, with classNames extracted from the component names.

[mxstbr]

You can pass a class to a styled component and it will work perfectly fine @davibe:

const MyComp = styled.div`
  some: styles;
`

// ...

<MyComp className="my-global-class" />

@haikyuu see #227 and https://github.com/styled-components/babel-transform-styled-components, that will soon be a thing!

[davibe]

@mxstbr i know i can pass it a className but that means that the parent component needs to take care of it, which is not what i want either

[mxstbr]

Then do this:

// MyComp.js
const MyComp = styled.div`
  some: styles;
`

export default => (props) => <MyComp {...props} className="my-global-class" />;

Now in your parent component you can just use MyComp without having to worry about the class:

// ParentComp.js
import MyComp from './MyComp.js'

<MyComp />

[davibe]

@mxstbr If I do it like that the component gets BOTH the class you specify and the random name generated by styled(). Then i can't extend it with styled anymore or if I do it i get incoherent results.

See the BREAKING CASE in main.js here http://www.webpackbin.com/V1HzUEezf

[haikyuu]

@davibe it's working as intended. Here is the non breaking code:

const ButtonWithClass = (props) => <Button {...props} className={props.className+" button"}  />

http://www.webpackbin.com/4y64Cy-zz

[davecyen]

I have the same concern as @davibe. I'm importing a third-party component such as:

import { AppBar } from 'material-ui';

and then I would like to override its default styling:

const OverrideAppBar = styled(AppBar)`
  border: 1px solid red;
  background-color: red;
`;

However, these override rules aren't working.

How can I achieve the override without editing code from the imported library, i.e. node_modules/material-ui?

[mxstbr]

How can I achieve the override without editing code from the imported library

You tell the material-ui people to attach the className to their components. I have no idea why they don't do that, but that means they also don't support <AppBar className="custom-styling" />, which is pretty ridiculous.

[GGAlanSmithee]

@mxstbr @davecyen I'm not sure how material-ui applies their styles, but if they inline them, they would override the ones from styled-components, would it not? Have you inspected the DOM in chrome dev tools for example?

[davecyen]

@mxstbr thanks for the response and forgive me if I'm not understanding correctly.

Is this what you are suggesting?

import { AppBar } from 'material-ui';

const OverrideAppBar = styled(AppBar)`
  border: 1px solid red;
  background-color: red;
`;

// ...

<OverrideAppBar className="custom-styling" />

How then do I set the styles for .custom-styling? material-ui does support passing in className as a prop.

[mxstbr]

material-ui does support passing in className as a prop.

Then this works, since all styled-components does is pass in the className. See https://github.com/styled-components/styled-components/blob/master/docs/existing-css.md

const OverrideAppBar = styled(AppBar)`
  border: 1px solid red;
  background-color: red;
`;

[GGAlanSmithee]

Please let me note again, it seems as material-ui adds styles inline: (ref).

The first way to override the style of the components is to use the inline-style approach.

The second way to override the style of the components is to use the css-style approach.

Every component provides a className property. Those properties are always applied to the root element.

Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style.

Please excuse me if I missunderstood something.

[mxstbr]

Nope you got that right, so you need to use !important just due to the way material-ui works:

const OverrideAppBar = styled(AppBar)`
  border: 1px solid red !important;
  background-color: red !important;
`;

[davecyen]

Thanks @mxstbr @GGAlanSmithee, !important is working as suggested although I was hoping for a different answer.

Bad on material-ui for using inline-styles, but would love to see a future update where styled-components is able to work around this.

[mxstbr]

but would love to see a future update where styled-components is able to work around this.

How should we work around this? I wish I could tell you we're going to fix this, but there's nothing we can do 😢 the fault is on material-uis side here 😕

[tpinne]

I second the question from @coffenbacher . We use semantic-ui-react and because their selectors have a higher specifity we need to apply !important to every css rule to overwrite the default styles of a specific component.

[mxstbr]

This is an extremely old issue that I opened before the library was even officially released, it's really not necessary to notify everyone here.

If you have a question or suggestion please ask it in the community, if you think you've found a bug please submit an issue here. Thanks!

For material-ui and semantic-ui workarounds, see #1253 and all the linked issues, there's tons.