Reactでstyle適用を簡潔に書く方法

現在reactのチュートリアル「tic tac toe」の練習問題をやっています。
その最後の問題
「5. When someone wins, highlight the three squares that caused the win.」
というのをやっています。

いくらかやったあとに答えを調べてみると、
何点か変更した一部に以下がありました。

javascript
1function Square(props){
2
3  if(props.highlight){
4    return(
5      <SquareStyle className="square" style={{color: "red"}} onClick={props.onClick}>
6        {props.value}
7      </SquareStyle>
8    );
9  }else{
10    return(
11      <SquareStyle className="square" onClick={props.onClick}>
12        {props.value}
13      </SquareStyle>
14    );
15  }
16}

これは四角形を描画する関数で、以上のように記述すると見事理想通りに動くのですが、ほとんど同じ3行を繰り返すのはなんだか受け付けないなと感じ、修正してみました。

これとか

javascript
1  const redLine = props.highlight? "red-line": "";
2  return(
3    <SquareStyle className="square" onClick={props.onClick}>
4      <span className={redLine}>{props.value}</span>
5    </SquareStyle>
6  );
7

これとか

javascript
1  let squareClass = "square " + (props.highlight?"red-line":"");
2  return(
3    <SquareStyle className={squareClass} onClick={props.onClick}>
4      {props.value}
5    </SquareStyle>
6  );

これとか

javaascript
1  return(
2    <SquareStyle className={`square ${props.highlight ? "red-line": ""}`} onClick={props.onClick}>
3      {props.value}
4    </SquareStyle>
5  );

これとか

javascript
1return(
2    <SquareStyle className="square" style={props.highlight? 'color:"red"': '""'} onClick={props.onClick}>
3      {props.value}
4    </SquareStyle>
5  );

色々試行錯誤して試してみたのですが、どれも上手く行きませんでした。

styleの適用にはstyled componentを使っています。

javascript
1export const SquareStyle = styled.button`
2  background: #fff;
3  border: 1px solid #999;
4  float: left;
5  font-size: 40px;
6  font-weight: bold;
7  line-height: 74px;
8  height: 74px;
9  margin-right: -1px;
10  margin-top: -1px;
11  padding: 0;
12  text-align: center;
13  width: 74px;
14  &:focus{
15    outline: none;
16  }
17  span{
18    .red-line{
19      color:red;
20    }
21  }
22`;