Question

我有以下 CSS 样式，希望在React中更改为 styled-components ：

class CnUserLogin(wx.Frame): 

def __init__(self, wxParent, user): 
    """Constructor"""

    if sys.version_info[0] < 3: 
        wx.Frame.__init__(self, None, title = "Please login!") # this is newstyle for python 2
    else: 
        super( CnUserLogin, self ).__init__(None, title="Please login!")
    self.user = user 
    self.SetIcon(user.queryProjectManager().ico)

    userSizer = wx.BoxSizer(wx.HORIZONTAL)

    userLabel = wx.StaticText(self, label="Username:")
    userSizer.Add(userLabel, 0, wx.ALL|wx.CENTER, 5)
    self.userNameInput = wx.TextCtrl(self)
    userSizer.Add(self.userNameInput, 0, wx.ALL, 5)

    # pass info
    passwordSizer = wx.BoxSizer(wx.HORIZONTAL)

    passwordLabel = wx.StaticText(self, label="Password:")
    passwordSizer.Add(passwordLabel, 0, wx.ALL|wx.CENTER, 5)
    self.passwordInput = wx.TextCtrl(self, style=wx.TE_PASSWORD|wx.TE_PROCESS_ENTER)
    self.passwordInput.Bind(wx.EVT_TEXT_ENTER, self.onLogin)
    passwordSizer.Add(self.passwordInput, 0, wx.ALL, 5)

    self.captchaPrompt = wx.StaticText(self, label="What is the text to the right ?")
    self.captchaInput = wx.TextCtrl(self)
    captchaPromptSizer = wx.BoxSizer(wx.VERTICAL)
    captchaPromptSizer.Add(self.captchaPrompt)
    captchaPromptSizer.Add(self.captchaInput)

    self.buttonCaptcha = wx.Button(self, size=(200,100))
    self.onCaptcha(None)
    self.buttonCaptcha.Bind(wx.EVT_BUTTON, self.onCaptcha)

    captchaSizer = wx.BoxSizer(wx.HORIZONTAL)
    captchaSizer.Add(captchaPromptSizer)
    captchaSizer.Add(self.buttonCaptcha)

    buttonSizer = wx.BoxSizer(wx.HORIZONTAL)
    buttonLogin = wx.Button(self, label="Login")
    buttonLogin.Bind(wx.EVT_BUTTON, self.onLogin)
    buttonSizer.Add(buttonLogin, 0, wx.ALL|wx.CENTER, 5)

    buttonRegister = wx.Button(self, label="New user")
    buttonRegister.Bind(wx.EVT_BUTTON, self.onRegister)
    buttonSizer.Add(buttonRegister, 0, wx.ALL|wx.CENTER, 5)

    buttonCancel = wx.Button(self, label="Cancel")
    buttonCancel.Bind(wx.EVT_BUTTON, self.onCancel)
    buttonSizer.Add(buttonCancel, 0, wx.ALL|wx.CENTER, 5)

    loginSizer = wx.BoxSizer(wx.VERTICAL)
    loginSizer.Add(userSizer, 0, wx.ALL, 5)
    loginSizer.Add(passwordSizer, 0, wx.ALL, 5)
    loginSizer.Add(captchaSizer, 0, wx.ALL, 5)
    loginSizer.Add(buttonSizer, 0, wx.ALL, 5)

    self.SetSizer(loginSizer)

    self.loginStatus = 'notYet'
    self.countTrial = 3 


    self.Layout()
    self.Refresh() 
    self.Show() 
    CnUtil.queryProjectManager().wxApp.MainLoop()

我有点困惑标签嵌套的工作方式。我正在使用样式组件：

.movie-page .movie-details {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 20px auto 60px auto;
}

.movie-page .movie-details h1 {
  line-height: 1.5em;
}

.movie-page .movie-details h1 span {
  font-size: inherit;
  font-weight: normal;
  padding-left: 1rem;
  color: #bbb;
  line-height: inherit;
}

此代码似乎还可以吗？我的 h1 标签看起来像 p 标签

Answer 1

您应该能够选择类似的内容。但您也可以像下面这样整洁：

const MovieDetailsHeader = styled.h1 `
   line-height: 1.5em;
   span {
        font-size: inherit;
        font-weight: normal;
        padding-left: 1rem;
        color: #bbb;
        line-height: inherit;
    }
`

如何将普通的嵌套CSS更改为样式组件？

1 个答案: