Question

我介绍了如何通过Material-ui的{withStyle}属性使用JSS。我刚刚遇到了“样式化组件”，我试图学习它的基础知识。但是我找不到有关如何使用样式化组件创建“ classNames”的文档。请查看下面的窥探器，了解我要如何使用JSS进行操作，您能否帮助我使用样式化组件部分

// WITH JSS======

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core';

const myStyle = {
  container : {
      backgroundColor : "blue"
  }
}

function MySampleComponent = ({classes}) => {
     return(<div>
              <div className={classes.container}> This one is styled 
              </div>
              <div> This one is not </div>
            </div>
        )
}

export default MySampleComponent;


//Now with 'Styled-Components'. 
//I know how to create a .div element with the given styles but I don't know how to name them so that I can use that variable to assign a className for only one of the divs.

const myStyledDiv = styled.div` background-color : blue; `

如何使用变量名'myStyledDiv'并将其分配给示例中的第一个div。

Answer 1

样式化的组件具有不同的方法。
您不应将myStyledDiv视为变量，而应将其视为具有自定义样式的组件。
来自样式化组件文档：

样式化组件删除了组件和样式之间的映射。这意味着在定义样式时，实际上是在创建法线 React组件，附加了您的样式。

因此，在使用样式组件时，您无需声明'myStyledDiv'变量并将其分配给div类名。
您创建一个“ MyStyledDiv”组件（具有自定义样式的div），并以这种方式使用它：

import styled from 'styled-components'

const MyStyledDiv = styled.div`
    background-color: blue;
`;

function MySampleComponent = (props) => {
     return(<div>
              <MyStyledDiv> 
                 This one is styled 
              </MyStyledDiv>
              <div>
                 This one is not 
              </div>
            </div>
        )
}

如何使用样式化组件将className添加到现有组件

1 个答案: